SA Element Registry
← Back to catalog
Heroes & Top-of-Page Live

sa-cva-split-hero v2026-06-13

Split-card hero: image left / navy copy CENTERED right. H1 = Poppins 700 with one orange accent word, plus a UVP or educational subline. Single CALL NOW button. No eyebrow, no trust strip.

Source skill: sa-cva-split-hero · Updated 2026-06-15 15:55:39

Edit

Live preview

Open ↗

When to use

DEFAULT hero for practice-area pages (Sam directive 2026-06-11). Top of a practice-area, location, or landing page when a strong topic image + navy conversion panel hero is needed. Conversion pages use the INJURED-IN pattern; informational pages use an educational question that does not pitch.

Rules & constraints

Live reference

https://aguiarinjurylawyers.com/practice-areas/atv-accident/

Deployment notes

Flip rules carry !important (legacy pages set .cva-btn display with !important). Desktop CTA = GET STARTED anchored to #sa-intake-form (requires an on-page form: Sidebar Option B/C/D carry it as of el18 v2026-06-11a; fall back to a single CALL NOW if the page truly has no form). Mobile (<=768px) = CALL NOW tel:. Button font-weight is 700 per current sa-copywrite-design; use Poppins weights 500, 600, and 700 only. Updated June 7, 2026: skill now carries a full "Where to see this element" section (registry detail /element/37 + /api/elements/37, GitHub source seed/seed-data.js, local references/snippet.html, and all 11 verified live permalinks). Two slugs corrected from prior notes: hit-and-run lives at /practice-areas/hit-and-run/ and the fatigue page at /practice-areas/driver-fatigue/. Verified-live permalinks (June 7, 2026): car-accident, motorcycle-accident, atv-accident, moped-accident, semi-truck-accident, ups-delivery-accident, uber-lyft-accident, hit-and-run, insurance-bad-faith (conversion); truck-accident-causes, driver-fatigue (informational) — all under /practice-areas/. H1 Poppins 700 with one #D97706 accent word; CALL NOW button; topic-matched image per page. Host page must load the Poppins Google Fonts link. Deliver a mockup for approval before deploying. VISUAL TRUTH SOURCE.

HTML

<!-- ==================== SPLIT HERO (cva-hero) ==================== -->
<!-- Image left / navy copy CENTERED right. One CALL NOW button. No eyebrow, no trust strip. -->
<!-- Swap: aria-label, hero image url, headline accent word, UVP/educate subline. -->
<section class="cva-hero" aria-label="Kentucky ATV accident lawyer">
  <div class="cva-hero__img" role="img" aria-label="Kentucky ATV accident lawyer"
       style="background-image:linear-gradient(rgba(11,33,45,.22),rgba(11,33,45,.5)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/ATV_Accident.webp');"></div>
  <div class="cva-hero__copy">
    <!-- CONVERSION PATTERN: "INJURED IN A[N] <span class=hero-accent>TYPE</span> ACCIDENT?" -->
    <!-- INFORMATIONAL PATTERN: an educational question, e.g. "DO YOU KNOW HOW DELIVERY DRIVER <span class=hero-accent>FATIGUE</span> CAUSES ACCIDENTS?" -->
    <h1 class="cva-hero__h1">INJURED IN AN <span class="hero-accent">ATV</span> ACCIDENT?<span class="hero-uvp">Kentucky ATV accident attorneys who go to work from the first call, with the Bigger Share Guarantee&reg; so you keep more of your settlement.</span></h1>
    <div class="cva-hero__cta">
      <a class="cva-btn cva-btn--primary cva-btn--getstarted" href="#sa-intake-form">GET STARTED</a>
      <a class="cva-btn cva-btn--primary cva-btn--mobilecall" href="tel:5028888888">
        <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.4 2.2z"/></svg>
        CALL NOW
      </a>
    </div>
  </div>
</section>

CSS

.cva-hero{display:grid;grid-template-columns:1fr 1fr;min-height:520px;background:#0B212D;width:100%;}
.cva-hero__img{background-size:cover;background-position:center;}
.cva-hero__copy{padding:clamp(36px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
/* H1 = Poppins 700 (June 4, 2026 standard); ONE orange accent word per headline */
.cva-hero__h1{font-family:var(--font-ui),'Poppins',sans-serif !important;font-weight:700 !important;letter-spacing:-.01em !important;font-size:clamp(26px,3.6vw,44px);line-height:1.12 !important;margin:0 0 16px;color:#fff !important;}
.cva-hero__h1 .hero-accent{color:#D97706 !important;}
.cva-hero__h1 .hero-uvp{display:block;margin-top:14px;font-family:var(--font-ui),'Poppins',sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:#fff !important;max-width:46ch;margin-left:auto;margin-right:auto;}
.cva-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px 0 0;}
.cva-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui),'Poppins',sans-serif;font-weight:700;font-size:15px;line-height:1;text-decoration:none;padding:14px 26px;border-radius:999px;transition:transform .2s,box-shadow .2s;}
.cva-btn--primary{background:#D97706;color:#fff !important;}
.cva-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,119,6,.35);}
@media(max-width:900px){
  .cva-hero{grid-template-columns:1fr;}
  .cva-hero__img{min-height:220px;order:-1;}
}
/* 2026-06-11 Sam: desktop GET STARTED (form anchor), mobile CALL NOW */
.cva-btn--mobilecall{display:none !important;}
@media(max-width:768px){.cva-hero .cva-btn--getstarted{display:none !important;}.cva-hero .cva-btn--mobilecall{display:inline-flex !important;}}