SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cva-blog-hero
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Split-card blog hero for aguiarinjurylawyers.com. Image-left / centered navy copy-right layout for blog posts and editorial pages. Full-bleed dark navy (#0B212D) section, left column is a cover-image cell with a subtle navy gradient overlay, right column is a centered copy column: large Poppins-700 H1 with one Foundry-orange (#D97706) accent span, a 500-weight subline span, and a single orange CALL NOW pill button. NO eyebrow, NO trust strip, NO form, NO results ticker in the hero. Forms live in the sidebar (Option B), not the hero.
When to use
Top-of-page hero on blog posts and editorial/news pages that need a clean, focused, single-action header with a strong cover image. Use when a post warrants a designed hero (e.g. a major firm news story or investigative recap) rather than the default WordPress title block. Pair with sidebar Option B (CTA -> Form -> Trust) so the lead-capture form sits in the rail, not the hero.
Source skill
Rules (one per line, leading dash optional)
1. Strict palette: section background #0B212D; only Foundry orange #D97706 for the H1 accent span and the CALL NOW button. NO legacy #F89C22, no orange backgrounds. 2. Two-column split on desktop via the scoped <style> grid (1fr 1fr); image-left, copy-right. 3. Copy column is centered (text-align:center, align-items:center) with the H1, an inline subline span, and a single centered CALL NOW pill. 4. H1: Poppins 700, clamp(26px,3.6vw,44px), white, with exactly one orange accent span. Subline: Poppins 500, clamp(15px,1.4vw,18px), white, max-width ~50ch. 5. Single CTA only: orange #D97706 pill, tel:5028888888 href (CallRail swaps the displayed digits). No secondary button. 6. NO eyebrow/kicker, NO trust strip, NO form, NO results ticker inside the hero - those belong elsewhere on the page. 7. Responsive rules MUST live in the scoped <style> block, never inline: at max-width:900px the grid collapses to one column and the image cell moves to order:-1 (stacks first) with min-height:220px. Inline !important would otherwise beat the media query. 8. Image cell uses background-image with a linear-gradient navy overlay (rgba(11,33,45,.22) -> .5) over the cover photo; min-height 220px so it never collapses. 9. No emoji. Use ’ / ® HTML entities in copy. **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
Ships as a single <section class="cva-hero"> immediately followed by a scoped <style> block that holds the grid + media-query rules. On aguiarinjurylawyers.com the page-level <style> block survives WP Rocket on this post, so the scoped grid/media rules render correctly; if deploying to a page where Rocket strips <style>, move the grid rules to a surviving stylesheet. The full-bleed effect uses width:100vw + margin-left:calc(50% - 50vw) on the section, so it must sit inside .sa-page-wrapper. Pair with sidebar Option B. Swatch via Python find/replace (the edit tool fails on large multi-line HTML).
HTML
<section class="cva-hero" aria-label="Sam Aguiar and Jon Hollan at the UPS Flight 2976 NTSB hearings" style="min-height:520px !important;background:#0B212D !important;width:100vw !important;margin-left:calc(50% - 50vw) !important;"> <div class="cva-hero__img" role="img" aria-label="NTSB investigative hearing room during the UPS Flight 2976 hearings" style="background-image:linear-gradient(rgba(11,33,45,.22),rgba(11,33,45,.5)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/06/ups-flight-2976-ntsb-hearing-room.jpg') !important;background-size:cover !important;background-position:center !important;min-height:220px !important;"></div> <div class="cva-hero__copy" style="padding:clamp(36px,5vw,72px) !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;text-align:center !important;"> <h1 style="font-family:'Poppins',sans-serif !important;font-weight:700 !important;letter-spacing:-.01em !important;font-size:clamp(26px,3.6vw,44px) !important;line-height:1.12 !important;margin:0 0 16px !important;color:#fff !important;text-align:center !important;">INSIDE THE NTSB HEARINGS ON THE <span style="color:#D97706 !important;">UPS FLIGHT 2976</span> CRASH<span style="display:block !important;margin:14px auto 0 !important;font-family:'Poppins',sans-serif !important;font-weight:500 !important;font-size:clamp(15px,1.4vw,18px) !important;line-height:1.55 !important;color:#fff !important;max-width:50ch !important;">Sam Aguiar and Jon Hollan were in the room as testimony exposed two decades of downplayed warnings, optional fixes, and records the parties could not produce.</span></h1> <div class="cva-hero__cta" style="display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:12px !important;margin:8px 0 0 !important;"> <a class="cva-btn cva-btn--primary" href="tel:5028888888" style="display:inline-flex !important;align-items:center !important;gap:8px !important;font:700 15px/1 'Poppins',sans-serif !important;text-decoration:none !important;padding:14px 26px !important;border-radius:999px !important;background:#D97706 !important;color:#fff !important;"> <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
.sa-page-wrapper .cva-hero{display:grid !important;grid-template-columns:1fr 1fr !important;}@media(max-width:900px){.sa-page-wrapper .cva-hero{grid-template-columns:1fr !important;}.sa-page-wrapper .cva-hero__img{order:-1 !important;min-height:220px !important;}}
Save changes
Cancel