SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-hero-lexair
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Lexington Aerial Skyline hero, rotating-results variant. Full-bleed split hero with copy + GET STARTED CTA left and a Life-Changing Results rotating card right, over the aerial Lexington skyline image. Alternate hero for the Lexington location page.
When to use
Alternate top-of-page hero for /locations/lexington/ when you want social-proof results instead of an in-hero form.
Source skill
Rules (one per line, leading dash optional)
1. Full-bleed 100vw, CSS scoped to the element's BEM namespace so styles never leak. 2. Two-column split: copy left (H1 + single GET STARTED CTA), rotating Life-Changing Results card right. 3. Results card cycles 12 amounts on a 72s loop, $14M down to $4M; anchored by a See More Results link to /about-us/our-results/. 4. H1 is a 3-line stack: ALL-CAPS question line + two title-support lines (last line orange). 5. Replace {{HERO_IMAGE_URL}} before publish (or use the pre-wired Media Library URL). Hero image uses eager/no-lazy. 6. Orange #D97706 accent; no banned blues.
Live reference URL
Deployment notes
WordPress Custom HTML block. Source image: lexington-2.webp. Replace {{HERO_IMAGE_URL}}. Results loop = 72s, 12 amounts.
HTML
<section class="sa-hero-lexair" aria-labelledby="sa-hero-lexair-title"> <img class="sa-hero-lexair__bg skip-lazy no-lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/lexington-skyline-aerial-golden.jpg" alt="Aerial view of downtown Lexington Kentucky skyline" width="1600" height="900" loading="eager" decoding="async" data-no-lazy="1"> <div class="sa-hero-lexair__overlay" aria-hidden="true"></div> <div class="sa-hero-lexair__grid"> <div class="sa-hero-lexair__copy"> <h1 id="sa-hero-lexair-title" class="sa-hero-lexair__title"> <span class="sa-hero-lexair__title-question">LEXINGTON CAR ACCIDENT?</span> <span class="sa-hero-lexair__title-support">Our Award-Winning Injury Attorneys</span> <span class="sa-hero-lexair__title-support">Are Ready To Work For You.</span> </h1> <div class="sa-hero-lexair__actions"> <a class="sa-hero-lexair__cta" href="/contact/">GET STARTED</a> </div> </div> <div class="sa-hero-lexair__results" aria-label="Recent case results"> <h3>Life-Changing Results</h3> <div class="sa-hero-lexair__results-wrap"> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$14,000,000</div><div class="sa-hero-lexair__desc">Insurance Dispute</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$12,000,000</div><div class="sa-hero-lexair__desc">Wrongful Death</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,800,000</div><div class="sa-hero-lexair__desc">Car Accident</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,250,000</div><div class="sa-hero-lexair__desc">Commercial Vehicle</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,100,000</div><div class="sa-hero-lexair__desc">Box Truck Accident</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,000,000</div><div class="sa-hero-lexair__desc">Semi-Truck Accident</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,000,000</div><div class="sa-hero-lexair__desc">Wrongful Death</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$6,000,000</div><div class="sa-hero-lexair__desc">Premises Liability</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$5,600,000</div><div class="sa-hero-lexair__desc">Wrongful Death</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$5,200,000</div><div class="sa-hero-lexair__desc">Trucking Accident</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$4,100,000</div><div class="sa-hero-lexair__desc">Car Accident</div></div> <div class="sa-hero-lexair__res"><div class="sa-hero-lexair__amount">$4,000,000</div><div class="sa-hero-lexair__desc">Trucking Accident</div></div> </div> <a class="sa-hero-lexair__results-link" href="/about-us/our-results/">See More Results</a> </div> </div> </section>
CSS
.sa-hero-lexair{ --sa-navy:#0B212D;--sa-black:#000;--sa-orange:#D97706;--sa-orange-deep:#B45309; --sa-white:#fff;--sa-soft:#E8EEF2; position:relative;width:100vw;max-width:100vw; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); min-height:600px;overflow:hidden;isolation:isolate; background:#0B212D;font-family:Poppins,system-ui,sans-serif; } .sa-hero-lexair *,.sa-hero-lexair *::before,.sa-hero-lexair *::after{box-sizing:border-box;font-family:Poppins,system-ui,sans-serif;} .sa-hero-lexair__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;} .sa-hero-lexair__overlay{position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(11,33,45,.92) 0%,rgba(11,33,45,.55) 60%,rgba(0,0,0,.78) 100%);} .sa-hero-lexair__grid{position:relative;z-index:1;max-width:1280px;margin:0 auto; padding:72px 32px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:540px;} .sa-hero-lexair__copy{color:#fff;text-align:center;} .sa-hero-lexair__title{font-size:clamp(28px,2.8vw,38px);font-weight:700;line-height:1.18;color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.45);margin:0 auto;max-width:820px;letter-spacing:0;text-align:center;} .sa-hero-lexair__title-question{display:block;text-transform:uppercase;color:#fff;} .sa-hero-lexair__title-support{display:block;color:#fff;font-size:.80em;} .sa-hero-lexair__title-support:last-child{color:var(--sa-orange);} .sa-hero-lexair__actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px;} .sa-hero-lexair__cta{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:16px 30px; border-radius:6px;font-weight:700;text-decoration:none;font-size:16px;letter-spacing:.04em;text-transform:uppercase; background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:var(--sa-orange);border:1.5px solid var(--sa-orange); box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .2s ease,color .2s ease,border-color .2s ease;} .sa-hero-lexair__cta:hover{color:#fff;border-color:#fff;transform:translateY(-1px);} .sa-hero-lexair__results{background:rgba(11,33,45,.78);border:1px solid rgba(217,119,6,.55);border-radius:14px; padding:36px 30px;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.5);} .sa-hero-lexair__results h3{color:#fff;font-size:22px;font-weight:700;margin:0 0 22px;letter-spacing:1px;text-transform:uppercase;} .sa-hero-lexair__results-wrap{position:relative;height:115px;overflow:hidden;} .sa-hero-lexair__res{position:absolute;inset:0;opacity:0;animation:sa-hero-lexair-fade 72s infinite;text-align:center;} .sa-hero-lexair__amount{font-size:clamp(40px,4.4vw,58px);font-weight:700;color:var(--sa-orange);line-height:1.05;} .sa-hero-lexair__desc{font-size:15px;font-weight:500;color:#fff;margin-top:8px;text-transform:uppercase;letter-spacing:.5px;} .sa-hero-lexair__res:nth-child(1){animation-delay:0s} .sa-hero-lexair__res:nth-child(2){animation-delay:6s} .sa-hero-lexair__res:nth-child(3){animation-delay:12s} .sa-hero-lexair__res:nth-child(4){animation-delay:18s} .sa-hero-lexair__res:nth-child(5){animation-delay:24s} .sa-hero-lexair__res:nth-child(6){animation-delay:30s} .sa-hero-lexair__res:nth-child(7){animation-delay:36s} .sa-hero-lexair__res:nth-child(8){animation-delay:42s} .sa-hero-lexair__res:nth-child(9){animation-delay:48s} .sa-hero-lexair__res:nth-child(10){animation-delay:54s} .sa-hero-lexair__res:nth-child(11){animation-delay:60s} .sa-hero-lexair__res:nth-child(12){animation-delay:66s} @keyframes sa-hero-lexair-fade{ 0%{opacity:0;transform:translateY(12px)}2%{opacity:1;transform:translateY(0)} 7%{opacity:1;transform:translateY(0)}8.5%{opacity:0;transform:translateY(-10px)}100%{opacity:0}} .sa-hero-lexair__results-link{display:inline-block;margin-top:8px;color:var(--sa-orange);font-weight:700;font-size:15px; text-decoration:none;border-bottom:1px solid rgba(217,119,6,.65);} .sa-hero-lexair__results-link:hover{color:#fff;border-color:#fff;} @media (max-width:900px){ .sa-hero-lexair{min-height:0;} .sa-hero-lexair__grid{grid-template-columns:1fr;gap:36px;padding:48px 22px;min-height:0;} .sa-hero-lexair__copy{text-align:center;} } @media (max-width:640px){ .sa-hero-lexair__title{font-size:clamp(28px,9vw,36px);line-height:1.16;} .sa-hero-lexair__title-support{font-size:.91em;} }
Save changes
Cancel