SA Element Registry
← Back to catalog
Content Blocks Live

sa-cva-body-sidebar v2026-06-10

Two-column body + sidebar layout grid wrapper with main content column, sticky 336px aside, and related-links card. CTA button uses border-box sizing so it never overflows the sidebar card; body paragraphs are a consistent 17px with a 19px lede.

Source skill: sa-cva-body-sidebar · Updated 2026-06-10 16:47:54

Edit

Live preview

Open ↗

When to use

Wrap the main body of any practice-area/location page that needs a sticky sidebar layout.

Rules & constraints

Live reference

https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/

Deployment notes

Packaged from the commercial-vehicle-accidents page. Host page must load the Poppins Google Fonts link. VISUAL TRUTH SOURCE for SAIL Design Foundation v1 — do not redesign or recolor.

HTML

<!-- ==================== BODY + SIDEBAR ==================== -->
<div class="cva-body">
  <div class="cva-main">
    <h2>A commercial vehicle crash is not a regular car accident</h2>
    <p class="cva-lede">When the vehicle that hit you was working, <a href="https://aguiarinjurylawyers.com/practice-areas/truck-accident/">hauling freight</a>, <a href="https://aguiarinjurylawyers.com/practice-areas/delivery-vehicle-accidents/">making deliveries</a>, or running a company errand, the case changes. There is usually more than one party on the hook, more than one insurance policy in play, and a company that starts protecting itself within hours of the crash.</p>
    <p>Sam Aguiar Injury Lawyers handles commercial vehicle claims across Kentucky, from Louisville and Lexington to the interstates that move freight through the state. These cases turn on driver logs, maintenance records, employment status, and the layers of coverage a business carries. We know where that proof lives and how fast it disappears, and we move to lock it down before the other side does.</p>
    <h3>Why these cases call for an experienced firm</h3>
    <p>Business vehicles carry commercial insurance policies that are often far larger than a personal auto policy. That is good news for a seriously injured client, and the reason the company and its insurer push back hard. The size of the policy is exactly why they assign adjusters and defense counsel early, and why a rushed, low first offer is so common. A claim built on preserved evidence and full medical documentation is what moves that number.</p>
  </div>

  <!-- Sidebar (approved Sidebar Stack: CTA + partner + trust + related) -->
  <aside class="cva-aside" role="complementary">
    <div class="cva-cta-card">
      <h3>Free Case Review</h3>
      <p>Talk to our team 24/7. Most commercial vehicle cases can be qualified in under 10 minutes.</p>
      <!-- Firm main line 502-933-6545; swap a DNI tracking number on deploy if needed -->
      <a class="cva-btn cva-btn--primary" href="tel:+15029336545">Call Now</a>
      <p class="cva-fineprint">$0 Out-Of-Pocket Forever</p>
    </div>
    <div class="cva-related">
      <h3>Related Practice Areas</h3>
      <ul>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/truck-accident/">Truck Accidents</a></li>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/delivery-vehicle-accidents/">Delivery Vehicle Accidents</a></li>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/bus-accident/">Bus Accidents</a></li>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/car-accidents/">Car Accidents</a></li>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/uber-lyft-accident/">Uber &amp; Lyft Accidents</a></li>
        <li><a href="https://aguiarinjurylawyers.com/practice-areas/wrongful-death/">Wrongful Death</a></li>
      </ul>
    </div>
  </aside>
</div>

CSS

:root{
  --sail-navy:#0B212D; --sail-navy-deep:#0a1520;
  --sail-orange:#D97706; --sail-orange-deep:#B45309;
  --sail-white:#fff; --sail-ink-light:#f7f9fa; --sail-mute:#5a6770;
  --sail-rule:rgba(11,33,45,.12); --card-border:#E5E9EC;
  --font-display:Georgia,'Times New Roman',serif; --font-ui:'Poppins',system-ui,sans-serif;
  --container:1180px;
}
/* ---------- Body + sidebar ---------- */
.cva-body{max-width:var(--container);margin:0 auto;padding:clamp(48px,7vw,88px) 24px;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:48px;align-items:start;}
.cva-main h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.12;margin:0 0 16px;}
.cva-main h3{font-size:21px;font-weight:700;margin:34px 0 10px;}
.cva-main p{margin:0 0 18px;font-size:17px;line-height:1.7;}
.cva-main p.cva-lede{font-size:19px;line-height:1.6;}
.cva-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:22px;}
.cva-cta-card{background:var(--sail-navy);color:#fff;border-radius:12px;padding:28px 24px;text-align:center;}
.cva-cta-card h3{font-family:var(--font-display);font-weight:600;font-size:23px;margin:0 0 8px;color:#fff;}
.cva-cta-card p{font-size:14px;opacity:1;margin:0 0 18px;}
.cva-cta-card .cva-btn{width:100%;justify-content:center;margin-bottom:10px;}
.cva-cta-card .cva-fineprint{font-size:12px;opacity:1;margin:8px 0 0;}
.cva-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;text-decoration:none;padding:15px 30px;border-radius:999px;box-sizing:border-box;transition:transform .2s,box-shadow .2s;}
.cva-btn--primary{background:#0B212D;color:#fff;}
.cva-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,119,6,.35);}
.cva-btn--ghost-navy{background:transparent;color:var(--sail-navy);border:1.5px solid var(--sail-navy);}
.cva-related{border:1px solid var(--card-border);border-radius:12px;padding:22px 24px;background:var(--sail-ink-light);}
.cva-related h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--sail-navy);margin:0 0 12px;}
.cva-related ul{list-style:none;margin:0;padding:0;}
.cva-related li{border-bottom:1px solid var(--sail-rule);}
.cva-related li:last-child{border-bottom:0;}
.cva-related a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 0;color:var(--sail-navy);text-decoration:none;font-weight:600;font-size:15px;}
.cva-related a:hover{color:var(--sail-orange-deep);}
.cva-related a::after{content:"\203A";color:var(--sail-orange);font-weight:700;}
@media(max-width:960px){.cva-body{grid-template-columns:1fr;}.cva-aside{position:static;}}

/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.cva-body h1,.cva-body h2,.cva-body h3{text-transform:uppercase !important;text-align:center !important;}
.cva-body .cva-btn,.cva-body .cva-btn--primary,.cva-body .cva-btn--ghost,.cva-body .sa-cta-banner-btn,.cva-body .sa-sidebar-btn,.cva-body .sa-side-btn,.cva-body .sa-submit-btn,.cva-body .sa-bsg-cta,.cva-body .sa-hero-cta,.cva-body .sa-partner-btn,.cva-body .sa-btn,.cva-body .sa-cta,.cva-body .sa-cta-btn,.cva-body .btn{text-transform:uppercase !important;text-align:center !important;}


/* === COMPLIANT BUTTON (no orange fill) === */
.cva-cta-card .cva-btn--primary{
  background:#FFFFFF !important;
  color:#0B212D !important;
  border:2px solid #FFFFFF !important;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cva-cta-card .cva-btn--primary:hover,
.cva-cta-card .cva-btn--primary:focus-visible{
  background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;
  color:#D97706 !important;
  border-color:#D97706 !important;
  transform:translateY(-2px);
}
.cva-cta-card .cva-btn--primary svg{fill:currentColor;}