sa-cva-types-grid v2026-06-10

3-up linked card grid with arrow markers on titles, for listing vehicle types or practice sub-types.

Source skill: sa-cva-types-grid · Updated 2026-06-10 16:47:54

Edit

Live preview

Open ↗

When to use

List vehicle types or practice-area sub-types as linked cards in a 3-column grid.

Rules & constraints

Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The `›` arrow on card titles uses orange as a text character.
No em dashes in body copy. Production copy should follow the firm's em-dash style guide.
Phone number lives in `tel:` href only. Button label is text, never the phone number itself.
Fonts: Poppins (UI) + Georgia/Times New Roman (display). The host page must load the Google Fonts link below.
Text always full opacity per sa-brand-decisions §3.
This is the VISUAL TRUTH SOURCE for SAIL Design Foundation v1 -- do not redesign or recolor.
**Google Fonts (host page must load):**
`https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap`

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

<!-- ==================== TYPES CARD GRID ==================== -->
<div class="cva-types">
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/truck-accident/"><h3>Semis &amp; Tractor-Trailers</h3><p>FMCSA-regulated big rigs hauling freight on Kentucky interstates.</p></a>
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/"><h3>Box Trucks &amp; Straight Trucks</h3><p>Moving trucks, furniture haulers, and 26-foot rental fleets.</p></a>
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/delivery-vehicle-accidents/"><h3>Delivery Vans</h3><p>Amazon, UPS, FedEx, and last-mile contractor vehicles.</p></a>
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/"><h3>Work &amp; Fleet Trucks</h3><p>Utility, landscaping, and trade company vehicles on the clock.</p></a>
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/bus-accident/"><h3>Buses &amp; Shuttles</h3><p>Transit, charter, school, and hotel shuttle operators.</p></a>
  <a class="cva-type-card" href="https://aguiarinjurylawyers.com/practice-areas/commercial-vehicle-accidents/"><h3>Dump Trucks &amp; Tankers</h3><p>Construction haulers and tankers carrying heavy or hazardous loads.</p></a>
</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;
}
/* ---------- Types card grid (approved pa-card style) ---------- */
.cva-types{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 8px;}
.cva-type-card{display:flex;flex-direction:column;background:var(--sail-ink-light);border:1px solid var(--card-border);border-radius:10px;padding:18px 20px;text-decoration:none;transition:transform .18s,box-shadow .18s;}
.cva-type-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,33,45,.08);}
.cva-type-card h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--sail-navy);}
.cva-type-card h3::after{content:" \203A";color:var(--sail-orange);}
.cva-type-card p{margin:0;font-size:13.5px;color:var(--sail-mute);line-height:1.5;}
@media(max-width:760px){.cva-types{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.cva-types{grid-template-columns:1fr;}}

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