SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cta-banner
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Bottom-of-page CTA banner. Default variant is sa-cta-image-banner (split image-left/copy-right). Single CTA button, regional tel: href.
When to use
Last main-column block before the footer on every content page.
Source skill
Rules (one per line, leading dash optional)
1. Bottom-of-page CTA. Default to sa-cta-image-banner (split image-left/copy-right). 2. Single CTA button — 'Call Now', tel: href only. 3. Visible Depth gradient or photo+overlay only — no flat navy. 4. One per page, always last main-column block before the footer.
Live reference URL
Deployment notes
Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules.
HTML
<!-- CTA BANNER RULES (Updated 2026-05-20): • H2 follows pattern: "[Question]?<br>[Action line]." - two-line stack with <br> line break. • Do NOT use "Call Now" as the action line. Use approved alternates: - "Get more. Get it faster." - "Get Back To Living Your Best Life." - "Real Clients. Real Results." • Button text: "Call Now" (only). Do NOT use "Call Now". • Image background is the preferred treatment when the page has a hero image - mirror the page hero image with the .sa-cta-banner-overlay gradient on top. Use .sa-cta-banner-img + .sa-cta-banner-overlay (see CSS below). Flat-gradient fallback is acceptable if no suitable image exists. --> <section class="sa-cta-banner"> <img class="sa-cta-banner-img" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/04/family-at-park-hero.webp" alt="" aria-hidden="true" loading="lazy" decoding="async" width="1200" height="675"> <div class="sa-cta-banner-overlay"></div> <div class="sa-cta-banner-inner"> <h2>[Question framing the user’s situation]?<br>[Approved action line, no “Call Now”].</h2> <p>You focus on getting better. We’ll handle everything else.</p> <a class="sa-cta-banner-btn" href="tel:5028888888">Call Now</a> </div> </section>
CSS
.sa-cta-banner{position:relative !important;overflow:hidden !important;isolation:isolate !important;background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;padding:72px 20px !important;text-align:center;margin-top:8px} .sa-cta-banner-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;z-index:1 !important;opacity:1 !important;visibility:visible !important} .sa-cta-banner-overlay{position:absolute !important;inset:0 !important;z-index:2 !important;background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(11,33,45,0.85) 60%,rgba(11,33,45,0.78) 100%) !important;pointer-events:none !important} .sa-cta-banner-inner{position:relative !important;z-index:3 !important;max-width:820px;margin:0 auto} .sa-cta-banner h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);color:#fff;margin:0 0 14px;line-height:1.15} .sa-cta-banner h2 br{display:block !important;content:"" !important} .sa-cta-banner p{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(15px,2vw,18px);color:#fff;margin:0 0 28px;opacity:.95} .sa-cta-banner-btn{display:inline-block;background:linear-gradient(0deg, #000000 0%, #0B212D 100%);color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:17px;padding:16px 36px;border-radius:6px;text-decoration:none;transition:transform .2s,box-shadow .2s} .sa-cta-banner-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,119,6,.35)} @media (max-width:768px){.sa-cta-banner{padding:48px 20px !important}} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-cta-banner h1,.sa-cta-banner h2,.sa-cta-banner h3{text-transform:uppercase !important;text-align:center !important;} .sa-cta-banner .cva-btn,.sa-cta-banner .cva-btn--primary,.sa-cta-banner .cva-btn--ghost,.sa-cta-banner .sa-cta-banner-btn,.sa-cta-banner .sa-sidebar-btn,.sa-cta-banner .sa-side-btn,.sa-cta-banner .sa-submit-btn,.sa-cta-banner .sa-bsg-cta,.sa-cta-banner .sa-hero-cta,.sa-cta-banner .sa-partner-btn,.sa-cta-banner .sa-btn,.sa-cta-banner .sa-cta,.sa-cta-banner .sa-cta-btn,.sa-cta-banner .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel