SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cva-media-band
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
'In The Media' dark band header plus a 3-up video card grid with placeholder play buttons and a More Videos link.
When to use
Showcase press/media coverage as a dark band with a 3-up video 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 4px top border and the H2 bottom-border use orange correctly. - 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` Video play affordances must use YouTube red (#FF0000 resting, #CC0000 hover) with a rounded-rectangle YouTube-style button, not a large orange circle.
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
<!-- ==================== MEDIA BAND ==================== --> <section class="sa-media-band"> <div class="sa-media-band-inner"> <h2>In The Media</h2> <p>Our attorneys are recognized voices for Kentucky crash victims, featured across local and national coverage.</p> </div> </section> <section class="sa-media-cards"> <div class="sa-media-cards-inner"> <!-- TODO(deploy): replace each .sa-media-video with a real YouTube iframe --> <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div> <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div> <div class="sa-media-card"><div class="sa-media-video"><span class="sa-media-play"></span></div><div class="sa-media-body"><h3>Video Title Placeholder</h3></div></div> </div> <div class="sa-media-seeall"><a href="https://aguiarinjurylawyers.com/resources/">More Videos →</a></div> </section>
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; } /* ---------- Media band (block) ---------- */ .sa-media-band{background:linear-gradient(180deg,#000 0%,var(--sail-navy) 100%);border-top:4px solid var(--sail-orange);padding:60px 24px 44px;color:#fff;text-align:center;} .sa-media-band-inner{max-width:900px;margin:0 auto;} .sa-media-band h2{font-size:34px;font-weight:700;margin:0 auto 14px;color:#fff;border-bottom:3px solid var(--sail-orange);display:inline-block;padding-bottom:6px;text-transform:uppercase;letter-spacing:.02em;} .sa-media-band p{font-size:16px;color:#fff;margin:0 auto;line-height:1.6;max-width:680px;} .sa-media-cards{background:var(--sail-ink-light);padding:44px 24px 50px;} .sa-media-cards-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} .sa-media-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(11,33,45,.08);} .sa-media-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--sail-navy);display:flex;align-items:center;justify-content:center;} .sa-media-play{width:68px;height:48px;background:#FF0000;border-radius:14px;display:flex;align-items:center;justify-content:center;} .sa-media-play::after{content:'';border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px;} .sa-media-video:hover .sa-media-play{background:#CC0000;} .sa-media-body{padding:16px 18px;text-align:center;} .sa-media-body h3{font-size:15px;font-weight:700;color:#5a6b75;margin:0;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;} .sa-media-seeall{text-align:center;max-width:var(--container);margin:28px auto 0;} .sa-media-seeall a{color:var(--sail-navy);font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--sail-orange);padding-bottom:2px;} @media(max-width:900px){.sa-media-cards-inner{grid-template-columns:1fr;}} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-media-band h1,.sa-media-band h2,.sa-media-band h3{text-transform:uppercase !important;text-align:center !important;} .sa-media-band .cva-btn,.sa-media-band .cva-btn--primary,.sa-media-band .cva-btn--ghost,.sa-media-band .sa-cta-banner-btn,.sa-media-band .sa-sidebar-btn,.sa-media-band .sa-side-btn,.sa-media-band .sa-submit-btn,.sa-media-band .sa-bsg-cta,.sa-media-band .sa-hero-cta,.sa-media-band .sa-partner-btn,.sa-media-band .sa-btn,.sa-media-band .sa-cta,.sa-media-band .sa-cta-btn,.sa-media-band .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel