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

sa6-hero-truck-accident v2026-06-09

Split-card v7 form hero for the Truck Accident page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

Source skill: hero-mockups-v7 · Updated 2026-06-09 17:31:06

Edit

Live preview

Open ↗

When to use

Use on /practice-areas/truck-accident/ when that page needs the v7 split-card hero with the intake form visible above the fold.

Rules & constraints

Live reference

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

Deployment notes

Source: local mockup hero-mockups-v7.html. Target page: https://aguiarinjurylawyers.com/practice-areas/truck-accident/. Deploy via [sal_homepage_intake] hero variant or equivalent contact-intake wiring; convert demo input IDs/buttons to the production form bridge before live use.

HTML

<section class="sa6-hero" aria-label="HIT BY A SEMI IN KENTUCKY?">
  <div class="sa6-hero__grid">
    <div class="sa6-hero__left">
      <h1 class="sa6-hero__h1">HIT BY A SEMI IN KENTUCKY?</h1>
      <p class="sa6-hero__sub">Our award-winning attorneys are here to get everything you are owed.</p>
      <div class="sa6-hero__imgwrap"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/semi-trucks-row-parked.webp" alt="Kentucky truck accident lawyers" loading="eager" referrerpolicy="no-referrer"></div>
    </div>
    <div class="sa6-form-card">
      <p class="sa6-form-card__title">Tell Us About Your Case</p>
      <div class="sa6-form">
        <div class="sa-field"><label class="sa-field-label" for="fn1">Full Name *</label><input id="fn1" type="text"></div>
        <div class="sa-field"><label class="sa-field-label" for="ph1">Phone *</label><input id="ph1" type="tel"></div>
        <div class="sa-field"><label class="sa-field-label" for="ct1">Case Type *</label><select id="ct1"><option>Case Type</option><option>Car Accident</option><option selected>Truck Accident</option><option>Motorcycle Accident</option><option>Rideshare Accident</option><option>Pedestrian Accident</option><option>Wrongful Death</option><option>Other</option></select></div><div class="sa-field"><label class="sa-field-label" for="inj1">Were You Injured? *</label><select id="inj1"><option>Were You Injured?</option><option>Yes</option><option>No</option></select></div>
        <div class="sa-field sa-field--full"><label class="sa-field-label" for="dt1">Details</label><textarea id="dt1" rows="2" placeholder="What happened?"></textarea></div>
        <div class="sa6-consent"><input type="checkbox" id="cs1"><label for="cs1">I agree to be contacted about my potential case and understand that standard messaging rates may apply.</label></div>
        <button class="sa6-submit" type="button">GET STARTED</button>
      </div>
    </div>
  </div>
</section>

CSS

.sa6-hero{position:relative;width:100%;background:linear-gradient(0deg,#0a1520 0%,#0B212D 100%);font-family:'Poppins',system-ui,sans-serif;}
.sa6-hero__grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:clamp(24px,3vw,48px);max-width:1280px;margin:0 auto;padding:40px clamp(20px,3vw,48px);align-items:center;}
.sa6-hero__left{display:flex;flex-direction:column;align-items:center;text-align:center;}
.sa6-hero__h1{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:clamp(24px,2.7vw,34px);line-height:1.12;color:#FFFFFF;text-align:center;margin:0 0 12px;text-shadow:0 2px 12px rgba(0,0,0,0.4);white-space:nowrap;letter-spacing:-0.01em;}
.sa6-hero__sub{font-size:18px;font-weight:500;line-height:1.5;color:#FFFFFF;text-align:center;max-width:30ch;margin:0 0 20px;}
.sa6-hero__imgwrap{width:100%;max-width:560px;height:230px;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(11,33,45,0.12);}
.sa6-hero__imgwrap img{width:100%;height:100%;object-fit:cover;display:block;}
.sa6-form-card{background:#FFFFFF;border:1px solid rgba(11,33,45,0.08);border-radius:16px;padding:24px 22px;width:100%;box-shadow:0 12px 32px rgba(11,33,45,0.18);text-align:left;box-sizing:border-box;}
.sa6-form-card__title{font-size:18px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#0B212D;margin:0 0 12px;text-align:center;}
.sa6-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.sa6-form .sa-field{margin:0;}
.sa6-form .sa-field--full{grid-column:1 / -1;}
.sa6-form .sa-field-label{display:block;margin:0 0 5px;font-size:12.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:#0B212D;}
.sa6-form input,.sa6-form select,.sa6-form textarea{width:100%;font-family:'Poppins',system-ui,sans-serif;font-size:15px;line-height:1.3;color:#0B212D;background:#FFFFFF;border:2px solid #C7D4E3;border-radius:10px;padding:10px 12px;box-sizing:border-box;}
.sa6-form textarea{resize:vertical;min-height:64px;}
.sa6-form select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,#7f92a3 50%),linear-gradient(135deg,#7f92a3 50%,transparent 50%);background-position:calc(100% - 22px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px);background-size:9px 9px,9px 9px;background-repeat:no-repeat;}
.sa6-consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:9px;margin:2px 0 2px;}
.sa6-consent input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:#F89C22;}
.sa6-consent label{color:#0B212D;font-size:12.5px;line-height:1.42;font-weight:500;}
.sa6-submit{grid-column:1 / -1;width:100%;border:2px solid #F89C22;border-radius:10px;padding:15px;background:linear-gradient(0deg,#0a1520 0%,#0B212D 100%);color:#FFFFFF;font-family:'Poppins',system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:0.04em;cursor:pointer;}
@media (max-width: 900px){.sa6-hero__grid{grid-template-columns:1fr;}.sa6-hero__imgwrap{height:200px;}}
@media (max-width: 768px){.sa6-hero__sub{display:none;}.sa6-hero__h1{white-space:normal;}}
@media (max-width: 560px){.sa6-form{grid-template-columns:1fr;}}