SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-bsg-cta-hero
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Reusable bottom-of-page CTA hero originally built for /about-us/bigger-share-guarantee/. Two-column layout: attorney headshot left (clean image, no caption overlay, no button), headline + tagline + bullets right. 2026-06-10: removed image caption overlay and Get Started button per Sam. BEM-scoped class namespace .sa-bsg-cta, no builder/theme dependency.
When to use
Pages where you want a stronger conversion close than the standard sa-cta-image-banner. Best on pages where the firm's BSG value-prop deserves repeated emphasis - homepage closer, marquee practice-area pages, location pages.
Source skill
Rules (one per line, leading dash optional)
1. No CTA button in this element (removed 2026-06-10); image-only media column. Conversion comes from page-level CTAs. 2. No caption/overlay text on the image (removed 2026-06-10). 3. Tagline ALL CAPS via text-transform, clamp(22,2.3vw,32), weight 700, letter-spacing .04em. 4. Bullet capitalization standard: '$0 Out-Of-Pocket Forever' (matches trust strip). 5. Bigger Share Guarantee(R) always carries the registered mark inside the orange accent span so it inherits color. 6. Mobile (<900px): stacks media first then body. Bullets stay left-aligned. 7. No em or en dashes anywhere. 8. Class namespace .sa-bsg-cta - do not collide with .bsg-cta (legacy class on same page). Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.
Live reference URL
Deployment notes
Deployed via REST POST to /wp-json/wp/v2/pages/9286. Component files on Sam's Mac: bigger-share-cta-hero-preview.html (browser preview), bigger-share-cta-hero.wp-html.html (templated with {{PLACEHOLDERS}}), bigger-share-cta-hero.populated.wp-html.html (drop-in for BSG page), README.md. Placeholders: CAPTION_TEXT, IMAGE_URL, IMAGE_ALT, CTA_LABEL, CTA_URL, HEADLINE_LINE1, HEADLINE_LINE2 (orange), BULLET_1..6, TAGLINE_LINE1, TAGLINE_LINE2. Deployment iterated 10+ times same day - reference the final state on the live page, not the early backup files. | 2026-06-10: caption overlay + Get Started button removed in registry; sitewide deployment planned just above footer / below FAQs on pages and posts (pending Sam approval). Rollback: all_elements_backup_2026-06-10.json in session outputs. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.
HTML
<!-- wp:html --> <section class="sa-bsg-cta" aria-labelledby="sa-bsg-cta-title"> <div class="sa-bsg-cta__inner"> <div class="sa-bsg-cta__media"> <figure class="sa-bsg-cta__frame"> <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/01/Sam-Website-Home-1.webp" alt="Sam Aguiar, Kentucky personal injury attorney" width="520" height="640" loading="lazy"> </figure> </div> <div class="sa-bsg-cta__body"> <h2 id="sa-bsg-cta-title" class="sa-bsg-cta__title"> Get More. Get It Faster.<br> <span class="sa-bsg-cta__accent">Get It With Sam Aguiar.</span> </h2> <ul class="sa-bsg-cta__list" role="list"> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Bigger Share Guarantee on every case</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>$0 Out-Of-Pocket Forever</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>No fee increase if your case goes to litigation</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Dedicated three-person case team</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Forbes 2025 Best-In-State recognition</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>1,000+ five-star Google reviews</li> </ul> <p class="sa-bsg-cta__tagline"> You focus on getting better.<br> We handle everything else. </p> </div> </div> </section> <!-- /wp:html -->
CSS
.sa-bsg-cta{ --bsg-navy:#0B212D; --bsg-navy-deep:#0a1520; --bsg-orange:#D97706; --bsg-white:#FFFFFF; --bsg-blue:#0B212D; --bsg-blue-hover:#D97706; font-family:'Poppins',system-ui,sans-serif; color:var(--bsg-white); background:linear-gradient(0deg,#000000 0%,var(--bsg-navy) 100%); padding:72px 24px; box-sizing:border-box; } .sa-bsg-cta *{box-sizing:border-box;} .sa-bsg-cta__inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(260px,420px) 1fr; gap:56px; align-items:center; } .sa-bsg-cta__media{display:flex;flex-direction:column;align-items:center;gap:24px;} .sa-bsg-cta__frame{ position:relative; margin:0; width:100%; max-width:420px; border:3px solid var(--bsg-orange); border-radius:4px; overflow:hidden; background:var(--bsg-navy-deep); box-shadow:0 10px 30px rgba(0,0,0,.45); } .sa-bsg-cta__frame img{display:block;width:100%;height:auto;object-fit:cover;} .sa-bsg-cta__body{display:flex;flex-direction:column;gap:24px;} .sa-bsg-cta__title{ margin:0; font-family:'Poppins',sans-serif; font-size:clamp(28px,3.4vw,46px); font-weight:700; line-height:1.15; color:var(--bsg-white); letter-spacing:-.005em; } .sa-bsg-cta__accent{color:var(--bsg-orange);} .sa-bsg-cta__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .sa-bsg-cta__list li{ position:relative; padding-left:36px; font-size:18px; font-weight:600; line-height:1.4; color:var(--bsg-white); } .sa-bsg-cta__list li::before{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:var(--bsg-orange); font-weight:700; font-size:18px; } .sa-bsg-cta__tagline{ margin:8px 0 0 0; font-family:'Poppins',sans-serif; font-size:clamp(22px,2.3vw,32px); font-weight:700; line-height:1.25; letter-spacing:.04em; text-transform:uppercase; color:var(--bsg-white); } @media (max-width:900px){ .sa-bsg-cta{padding:56px 20px;} .sa-bsg-cta__inner{grid-template-columns:1fr;gap:36px;} .sa-bsg-cta__media{order:1;} .sa-bsg-cta__body{order:2;text-align:center;align-items:center;} .sa-bsg-cta__list{align-items:flex-start;} .sa-bsg-cta__list li{text-align:left;} .sa-bsg-cta__title{text-align:center;} .sa-bsg-cta__tagline{text-align:center;} } @media (max-width:480px){ .sa-bsg-cta{padding:44px 16px;} .sa-bsg-cta__list li{font-size:16px;} }
Save changes
Cancel