SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-client-culture-video-band
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Client Culture / Community two-column video band. Dark Visible Depth left-copy band, smaller all-caps "Clients. Culture. Community." headline with Community in Foundry orange, concise supporting copy, and a right-side 16:9 video thumbnail with a YouTube-red play button.
When to use
Use as a trust-building firm-culture video band on homepage, about, attorney, or high-intent practice pages where visitors need to see the people and values behind the case team. Best below the hero or after the first proof section, not as the final CTA.
Source skill
Rules (one per line, leading dash optional)
1. Keep the headline text "Clients. Culture. Community." unless Sam approves a page-specific variant; Community should render in Foundry orange. 2. Left panel uses Visible Depth navy/black background with full-opacity white text. 3. No eyebrow/kicker or Louisville attribution in this element. 4. Video card is 16:9 with a dark thumbnail treatment and no text overlay. 5. Use a real YouTube or nocookie embed in production. Static thumbnail fallback must not show broken-image icons. 6. Mobile stacks copy above video with text still left-aligned unless the host page is fully centered. 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
Production needs the approved firm-culture video URL and thumbnail. If no final video exists, keep this row Beta and use the thumbnail-only preview. QA at 1280 desktop and 390 mobile before promoting to Live. 2026-06-16: removed eyebrow, removed Louisville attribution, shortened copy, made Community orange, removed video text overlays, and standardized the play affordance to YouTube red. 2026-06-16 follow-up: added mobile overflow guard after local Chrome screenshot QA showed the copy/thumbnail needed stricter viewport containment. 2026-06-16 follow-up: centered the culture-band heading to match sa-copywrite-design header alignment.
HTML
<section class="sa-culture-band" aria-labelledby="sa-culture-band-title"> <div class="sa-culture-band__inner"> <div class="sa-culture-band__copy"> <h2 id="sa-culture-band-title">Clients. Culture. <span>Community.</span></h2> <p>Hear from our team about the way we do things for our clients and community.</p> </div> <a class="sa-culture-band__video" href="https://www.youtube.com/" aria-label="Play firm culture video"> <span class="sa-culture-band__play" aria-hidden="true"></span> </a> </div> </section>
CSS
.sa-culture-band{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;font-family:Poppins,system-ui,sans-serif;padding:52px 24px;overflow:hidden;}.sa-culture-band *{box-sizing:border-box;} .sa-culture-band__inner{max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:56px;align-items:center;} .sa-culture-band__copy{min-width:0;} .sa-culture-band h2{font-size:clamp(28px,4vw,44px);line-height:1.05;font-weight:900;text-transform:uppercase;letter-spacing:0;text-align:center;color:#fff!important;margin:0 0 18px;max-width:520px;}.sa-culture-band h2 span{color:#D97706!important;} .sa-culture-band__copy>p{font-size:16px;line-height:1.55;font-weight:600;color:#fff!important;max-width:610px;margin:0;} .sa-culture-band__video{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,#222 0%,#59534d 55%,#0B212D 100%);box-shadow:0 16px 34px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.10);text-decoration:none;color:#fff;}.sa-culture-band__video::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.08));} .sa-culture-band__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:#FF0000;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;}.sa-culture-band__video:hover .sa-culture-band__play{background:#CC0000;}.sa-culture-band__play::after{content:"";display:block;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px;} @media(max-width:860px){.sa-culture-band__inner{grid-template-columns:minmax(0,1fr);gap:28px}.sa-culture-band{padding:44px 20px}.sa-culture-band h2{font-size:34px;max-width:100%;}.sa-culture-band__copy>p{max-width:100%;overflow-wrap:break-word}.sa-culture-band__video{width:100%;min-width:0}}
Save changes
Cancel