SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cva-types-grid
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
3-up linked card grid with arrow markers on titles, for listing vehicle types or practice sub-types.
When to use
List vehicle types or practice-area sub-types as linked cards in a 3-column grid.
Source skill
Rules (one per line, leading dash optional)
- 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 URL
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 & 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 & 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 & 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 & 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 & 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;}
Save changes
Cancel