SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cta-image-banner
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Full-bleed bottom-of-page CTA banner. Two approved variants: split image-left/copy-right (preferred default on desktop and mobile) and image-background with dark overlay (alternate).
When to use
Bottom of every content page as the final CTA moment.
Source skill
Rules (one per line, leading dash optional)
1. Split image-left / copy-right (preferred) or image-background + dark overlay (alternate). 2. Real firm-owned imagery only — no stock. 3. Single CTA button — 'Call Now', regional tel: href only. 4. Always last main-column block before the footer. 5. Button MUST be the registry depth button sa-depth-btn (#52), .on-dark variant on dark bands. The legacy .sa-cta-btn (white/orange-outline pill) is banned; pre-publish-qa fails on class="sa-cta-btn".
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
<!-- Split image-left / copy-right CTA banner (preferred variant) --> <section class="sa-cta-image-banner"> <div class="sa-cta-banner-inner"> <div class="sa-cta-banner-img"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/office-building.webp" alt="Sam Aguiar Injury Lawyers team" loading="lazy"></div> <div class="sa-cta-banner-copy"> <h2>Ready When You Are</h2> <p>No upfront costs. No fees unless we win. Your share is always bigger than ours.</p> <a href="tel:5028888888" class="sa-cta-banner-btn">Call Now</a> </div> </div> </section>
CSS
.sa-cta-image-banner{background:#0B212D;color:#fff;overflow:hidden} .sa-cta-banner-inner{display:grid;grid-template-columns:1fr 1fr;max-width:1400px;margin:0 auto;min-height:380px} .sa-cta-banner-img{position:relative} .sa-cta-banner-img img{width:100%;height:100%;object-fit:cover;display:block} .sa-cta-banner-copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .sa-cta-banner-copy h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);color:#fff;margin:0 0 16px} .sa-cta-banner-copy p{font-family:Poppins,sans-serif;font-size:17px;line-height:1.55;color:#E6ECF1;margin:0 0 28px;max-width:480px} .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;text-decoration:none;padding:14px 32px;border-radius:8px;letter-spacing:.3px} .sa-cta-banner-btn:hover{background:#FFB04A} @media(max-width:768px){.sa-cta-banner-inner{grid-template-columns:1fr}.sa-cta-banner-img{min-height:240px}.sa-cta-banner-copy{padding:40px 24px;align-items:center;text-align:center}} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-cta-image-banner h1,.sa-cta-image-banner h2,.sa-cta-image-banner h3{text-transform:uppercase !important;text-align:center !important;} .sa-cta-image-banner .cva-btn,.sa-cta-image-banner .cva-btn--primary,.sa-cta-image-banner .cva-btn--ghost,.sa-cta-image-banner .sa-cta-banner-btn,.sa-cta-image-banner .sa-sidebar-btn,.sa-cta-image-banner .sa-side-btn,.sa-cta-image-banner .sa-submit-btn,.sa-cta-image-banner .sa-bsg-cta,.sa-cta-image-banner .sa-hero-cta,.sa-cta-image-banner .sa-partner-btn,.sa-cta-image-banner .sa-btn,.sa-cta-image-banner .sa-cta,.sa-cta-image-banner .sa-cta-btn,.sa-cta-image-banner .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel