SA Element Registry
← Back to catalog
CTA / Footer Live

sa-cta-banner v2026-06-10

Bottom-of-page CTA banner. Default variant is sa-cta-image-banner (split image-left/copy-right). Single CTA button, regional tel: href.

Source skill: sa-template-reference · Updated 2026-06-10 16:47:52

Edit

Live preview

Open ↗

When to use

Last main-column block before the footer on every content page.

Rules & constraints

Live reference

https://aguiarinjurylawyers.com/

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&rsquo;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;}