SA Element Registry
Catalog
Admin
+ Add
Edit element
sa6-hero-bicycle-accident
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 v7 form hero for the Bicycle 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.
When to use
Use on /practice-areas/bicycle-accident/ when that page needs the v7 split-card hero with the intake form visible above the fold.
Source skill
Rules (one per line, leading dash optional)
Keep as a two-column split-card hero on desktop: content and image left, white intake card right. No email field in this v7 hero form; use Full Name, Phone, Case Type, optional injury field where appropriate, Details, consent, and one GET STARTED button. H1 stays short, direct, and all caps; do not add eyebrow text or a second CTA in the hero. Wrongful Death variant removes the Were You Injured field and makes Case Type full width. Use real or approved page-specific imagery only; avoid images that imply client fault. Deploy through the SAIL homepage intake/form bridge or equivalent WordPress form wiring before publishing.
Live reference URL
Deployment notes
Source: local mockup hero-mockups-v7.html. Target page: https://aguiarinjurylawyers.com/practice-areas/bicycle-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 WHILE RIDING YOUR BIKE?"> <div class="sa6-hero__grid"> <div class="sa6-hero__left"> <h1 class="sa6-hero__h1">HIT WHILE RIDING YOUR BIKE?</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/03/Bike-Accident.webp" alt="Bicycle on the ground after a Louisville crash" 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="fn3">Full Name *</label><input id="fn3" type="text"></div> <div class="sa-field"><label class="sa-field-label" for="ph3">Phone *</label><input id="ph3" type="tel"></div> <div class="sa-field"><label class="sa-field-label" for="ct3">Case Type *</label><select id="ct3"><option>Case Type</option><option>Car Accident</option><option>Truck Accident</option><option>Motorcycle Accident</option><option>Rideshare Accident</option><option>Pedestrian Accident</option><option>Wrongful Death</option><option selected>Other</option></select></div><div class="sa-field"><label class="sa-field-label" for="inj3">Were You Injured? *</label><select id="inj3"><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="dt3">Details</label><textarea id="dt3" rows="2" placeholder="What happened?"></textarea></div> <div class="sa6-consent"><input type="checkbox" id="cs3"><label for="cs3">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;}}
Save changes
Cancel