Edit element

sa-cva-split-hero

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

- **No eyebrow, no trust-badge strip** in this hero (removed June 3, 2026, Sam approved). Copy column is CENTERED (align-items:center; text-align:center).
- **Exactly ONE button: CALL NOW** (all caps). Orange pill is the ratified SAIL Design Foundation v1 exception. Phone lives in the `tel:` href only (canonical `tel:5028888888`; CallRail may DNS-swap the rendered digits and visible number).
- **H1 = Poppins 700** (June 4, 2026 standard), letter-spacing -.01em, line-height 1.12. Exactly ONE orange accent word/phrase per headline via `<span class="hero-accent">` (#D97706).
- **Two headline patterns:**
  - *Conversion pages:* "INJURED IN A[N] <ACCENT TYPE> ACCIDENT?" + a UVP subline ("[Type] accident attorneys ... Bigger Share Guarantee&reg; ...").
  - *Informational pages:* an EDUCATIONAL question that does not pitch, e.g. "DO YOU KNOW HOW DELIVERY DRIVER <FATIGUE> CAUSES ACCIDENTS?" with an educational (non-sales) subline.
- H1 follows firm-briefing 6.2: no "lawyer/attorney" in the visible H1 line; UVP/SEO fields are exempt.
- One topic-matched hero image per page (prefer .webp; verify the URL 200s before deploy).
- Mobile adaptive at max-width:900px: columns stack, image on top.
- Foundry orange #D97706 is text/border/accent only elsewhere; never a background fill outside the approved CALL NOW button. Never the retired #F89C22.
- **PROCESS RULE (June 4, 2026):** deliver a visual mockup (preview HTML + desktop/mobile screenshots) for Sam's approval BEFORE deploying this hero to live pages.

**EXEMPT SECTIONS (added 2026-06-13 by Sam) — do NOT auto-apply this hero to these page groups; each gets its own unique hero, not the standard registry library:**
- Attorney/team bios and the Meet Our Team index — /about-us/meet-our-team/* (custom per-attorney hero)
- Truck Talk topic library — /truck-talk/* (custom topic hero)
- Spanish pages — /espanol/, /lesiones-personales/, /abogado-louisville/, /abogado-lexington/, /abogados-*
- Nursing home — /practice-areas/nursing-home/
- Results pages — /about-us/our-results/, /case-results/ (use sa-results-hero / sa-split-results-hero)
- About Us section — /about-us/ and its top-level children
- Contact Us — /contact-us/ and /contact-us/thank-you/
- Bigger Share Guarantee — /about-us/bigger-share-guarantee/
- Hub pages — /practice-areas/ (hub), /locations/, /locations/kentucky/
- Homepage — /
- Legal/utility — /privacy-policy/, /terms-of-use/, /thank-you/

When designing or rebuilding a page in any of the above groups, route to the section's bespoke hero skill — do not deploy a generic registry hero.

Live reference URL 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

<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">
    
    
    <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;}}

Cancel