SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-results-hero
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Centered H1-only hero for aguiarinjurylawyers.com. Full-bleed Visible Depth navy-to-black gradient, a single centered Georgia/Times New Roman H1 with an italic-orange emphasis line, and a soft orange radial glow. NO eyebrow, NO subheadline, NO stat row, NO CTA button inside the hero. Use as the top-of-page hero on the Case Results page and any page that wants a clean, statement-style headline moment instead of the standard split-card hero. Triggers on 'results hero,' 'centered hero,' 'H1-only hero,' 'sa-results-hero,' 'statement hero,' 'Real Clients Real Results hero,' or any request for a minimal centered headline hero. Distinct from sa-cva-split-hero (image-left/copy-right) and the standard interior hero (eyebrow + subhead + trust strip) — pick one per page.
When to use
Top-of-page hero when a page wants a clean, statement-style centered headline moment instead of the standard split-card or eyebrow+subhead+trust-strip hero (e.g. the Case Results page).
Source skill
Rules (one per line, leading dash optional)
- Centered H1 only — NO eyebrow, NO subheadline, NO stat row, NO CTA button inside the hero. - H1 uses Georgia/Times New Roman with an italic-orange <em> emphasis line; orange (#D97706) for text only, never background. - Visible Depth navy-to-black gradient background with a soft orange radial glow. - No emoji.
Live reference URL
Deployment notes
Place as the first/top section of the page. Full-bleed. Pick ONE hero per page — distinct from sa-cva-split-hero (image-left/copy-right) and the standard interior hero. Run pre-publish-qa and playwright-visual-qa after deploy.
HTML
<!-- SA RESULTS HERO (centered, H1-only) - START --> <section class="sa-results-hero"> <h1>Real Clients.<br><em>Real Results.</em></h1> </section> <!-- SA RESULTS HERO - END -->
CSS
.sa-results-hero{position:relative;background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;overflow:hidden;text-align:center;padding:96px 24px} .sa-results-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 0%,rgba(217,119,6,.14),transparent 70%);pointer-events:none} .sa-results-hero h1{position:relative;z-index:1;font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(40px,6.6vw,80px);line-height:1.06;letter-spacing:-.01em;margin:0;max-width:none;color:#fff} .sa-results-hero h1 em{font-style:italic;color:#D97706} @media(prefers-reduced-motion:reduce){.sa-results-hero{transition:none}}
Save changes
Cancel