<div><span class="lbl">Video testimonial cards with a result</span>
<section class="cs" aria-label="Customer videos">
<ul class="cs-grid" role="list">
<li><figure class="cs-card">
<a class="cs-poster" style="--art:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 14px,transparent 14px 28px),linear-gradient(135deg,#1e3a8a,#0284c7)" href="#video-tide" aria-label="Play video: how Tidewater Freight cut missed deliveries, 2 minutes 14 seconds"><span class="cs-wm" aria-hidden="true">Tidewater</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="cs-time" aria-hidden="true">2:14</span></a>
<div class="cs-body">
<p class="cs-metric"><strong>38%</strong>fewer missed deliveries in six months</p>
<blockquote><p>Drivers see changes the minute dispatch makes them. The calls asking where a pallet went have almost stopped.</p></blockquote>
</div>
<figcaption><span class="cs-av" style="--av:#1d4ed8" aria-hidden="true">TO</span><span><span class="cs-name">Tomás Okafor</span><span class="cs-role">Logistics Lead, Tidewater Freight</span></span></figcaption>
</figure></li>
<li><figure class="cs-card">
<a class="cs-poster" style="--art:radial-gradient(circle at 78% 28%,rgba(254,240,138,.85) 0 16%,transparent 16.5%),radial-gradient(circle at 20% 110%,rgba(255,255,255,.14) 0 40%,transparent 40.5%),linear-gradient(135deg,#7c2d12,#d97706)" href="#video-copper" aria-label="Play video: how Copperleaf Bakery plans its ovens, 1 minute 48 seconds"><span class="cs-wm" aria-hidden="true">Copperleaf</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="cs-time" aria-hidden="true">1:48</span></a>
<div class="cs-body">
<p class="cs-metric"><strong>6 hrs</strong>saved on rota planning every week</p>
<blockquote><p>The bake schedule and the staff rota finally live in one place, so nobody turns up to an empty oven.</p></blockquote>
</div>
<figcaption><span class="cs-av" style="--av:#b45309" aria-hidden="true">HL</span><span><span class="cs-name">Hannah Lindqvist</span><span class="cs-role">Finance Director, Copperleaf Bakery</span></span></figcaption>
</figure></li>
<li><figure class="cs-card">
<a class="cs-poster" style="--art:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),linear-gradient(135deg,#134e4a,#059669)" href="#video-quill" aria-label="Play video: how Quillstone Architects onboard new staff, 3 minutes 5 seconds"><span class="cs-wm" aria-hidden="true">Quillstone</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="cs-time" aria-hidden="true">3:05</span></a>
<div class="cs-body">
<p class="cs-metric"><strong>2 days</strong>to onboard a new architect, down from a week</p>
<blockquote><p>New starters open one project space and find every drawing, decision and contact they need.</p></blockquote>
</div>
<figcaption><span class="cs-av" style="--av:#047857" aria-hidden="true">MB</span><span><span class="cs-name">Marcus Bell</span><span class="cs-role">Studio Manager, Quillstone Architects</span></span></figcaption>
</figure></li>
</ul>
</section></div>
<div><span class="lbl">Case study feature with three results</span>
<article class="cs cf" aria-labelledby="cf-title">
<a class="cs-poster" style="--art:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,255,255,.16) 0 50%,transparent 51%),radial-gradient(ellipse 60% 40% at 30% 100%,rgba(255,255,255,.12) 0 60%,transparent 61%),linear-gradient(160deg,#312e81,#7c3aed)" href="#video-saltmarsh" aria-label="Play video: the Saltmarsh Foods story, 4 minutes 20 seconds"><span class="cs-wm" aria-hidden="true">Saltmarsh Foods</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="cs-time" aria-hidden="true">4:20</span></a>
<div class="cf-body">
<p class="cf-kicker" id="cf-title">Case study · Saltmarsh Foods</p>
<figure>
<blockquote><p>Month-end used to swallow the second week of every month. Now the numbers are ready on the third working day, and the finance team spends the time it saved on pricing.</p></blockquote>
<figcaption><strong>Noor Haddad</strong>, Controller, Saltmarsh Foods</figcaption>
</figure>
<dl class="cf-stats">
<div><dt>to close the month, down from 12</dt><dd>3 days</dd></div>
<div><dt>checklist steps, down from 41</dt><dd>12</dd></div>
<div><dt>saved a year on overtime</dt><dd>£58k</dd></div>
</dl>
<a class="cf-link" href="#case-study-saltmarsh">Read the case study <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
</div>
</article></div>
CSS
/* Video and case-study testimonials. The poster is CSS artwork with the company name and a play button;
the whole poster is one link to the video or story page, so no video file is needed on this page. */
.cs{--cs-ink:#0f172a;--cs-muted:#475569;--cs-line:#e2e8f0;--cs-accent:#4338ca}
.cs-grid{display:grid;gap:24px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.cs-grid{grid-template-columns:repeat(3,1fr)}}
.cs-grid>li{display:flex}
.cs-card{flex:1;display:flex;flex-direction:column;margin:0;padding:12px;background:#fff;border:1px solid var(--cs-line);border-radius:22px;
box-shadow:0 18px 40px -30px rgba(15,23,42,.45)}
.cs-poster{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--art);
color:#fff;text-decoration:none}
.cs-poster:focus-visible{outline:3px solid var(--cs-accent);outline-offset:3px}
.cs-wm{position:absolute;left:16px;bottom:12px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.cs-time{position:absolute;right:12px;bottom:12px;padding:2px 8px;border-radius:6px;background:rgba(15,23,42,.72);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.cs-play{display:grid;place-items:center;width:60px;height:60px;padding-left:3px;border-radius:50%;background:#fff;color:var(--cs-accent);
box-shadow:0 0 0 8px rgba(255,255,255,.25);transition:transform .2s}
.cs-poster:hover .cs-play,.cs-poster:focus-visible .cs-play{transform:scale(1.08)}
.cs-body{flex:1;padding:20px 12px 0}
.cs-metric{display:flex;flex-direction:column;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--cs-line);font-size:.9rem;color:var(--cs-muted)}
.cs-metric strong{font-size:2rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--cs-accent)}
.cs-card blockquote{margin:0;line-height:1.6;color:var(--cs-ink)}
.cs-card figcaption{display:flex;align-items:center;gap:12px;padding:18px 12px 10px}
.cs-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--av);color:#fff;font-size:.85rem;font-weight:700}
.cs-name{display:block;font-weight:700;color:var(--cs-ink)}
.cs-role{display:block;font-size:.85rem;line-height:1.4;color:var(--cs-muted)}
/* Case study feature: large poster, the quote, three results and a link to the story */
.cf{display:grid;gap:clamp(20px,3vw,40px);align-items:center;padding:14px;background:#fff;border:1px solid var(--cs-line);border-radius:26px;
box-shadow:0 24px 50px -34px rgba(15,23,42,.5)}
@media (min-width:992px){.cf{grid-template-columns:1.05fr 1fr;padding:16px 40px 16px 16px}}
.cf .cs-poster{aspect-ratio:4/3;border-radius:18px}
.cf .cs-wm{left:22px;bottom:18px;font-size:1.4rem}
.cf .cs-time{right:18px;bottom:18px}
.cf .cs-play{width:76px;height:76px}
.cf-body{padding:8px 10px 14px}
.cf-kicker{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-accent)}
.cf figure{margin:14px 0 0}
.cf blockquote{margin:0;font-size:clamp(1.1rem,1rem + .5vw,1.3rem);font-weight:500;line-height:1.5;color:var(--cs-ink)}
.cf figcaption{margin-top:14px;font-size:.9rem;color:var(--cs-muted)}
.cf figcaption strong{color:var(--cs-ink)}
.cf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 0}
.cf-stats div{padding:14px;border-radius:14px;background:#eef2ff}
.cf-stats dt{font-size:.8rem;line-height:1.35;color:#3730a3}
.cf-stats dd{margin:0 0 4px;font-size:clamp(1.2rem,1rem + 1vw,1.5rem);font-weight:800;letter-spacing:-.02em;color:var(--cs-ink)}
.cf-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.cf-link{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-weight:700;color:var(--cs-accent);text-decoration:none;border-radius:4px}
.cf-link:hover{text-decoration:underline;text-underline-offset:3px}
.cf-link:focus-visible{outline:3px solid var(--cs-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cs-play{transition:none}.cs-poster:hover .cs-play,.cs-poster:focus-visible .cs-play{transform:none}}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Video testimonial cards with a result</span>
<section class="cs" aria-label="Customer videos">
<ul class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 list-unstyled mb-0" role="list">
<li class="col"><figure class="card cs-card h-100 mb-0">
<a class="cs-poster ratio ratio-16x9" style="--art:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 14px,transparent 14px 28px),linear-gradient(135deg,#1e3a8a,#0284c7)" href="#video-tide" aria-label="Play video: how Tidewater Freight cut missed deliveries, 2 minutes 14 seconds"><span class="cs-in"><span class="cs-wm" aria-hidden="true">Tidewater</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="badge cs-time" aria-hidden="true">2:14</span></span></a>
<div class="card-body">
<p class="cs-metric d-flex flex-column"><strong>38%</strong>fewer missed deliveries in six months</p>
<blockquote class="mb-0"><p class="mb-0">Drivers see changes the minute dispatch makes them. The calls asking where a pallet went have almost stopped.</p></blockquote>
</div>
<figcaption class="d-flex align-items-center"><span class="cs-av" style="--av:#1d4ed8" aria-hidden="true">TO</span><span><span class="d-block fw-bold">Tomás Okafor</span><span class="d-block cs-role">Logistics Lead, Tidewater Freight</span></span></figcaption>
</figure></li>
<li class="col"><figure class="card cs-card h-100 mb-0">
<a class="cs-poster ratio ratio-16x9" style="--art:radial-gradient(circle at 78% 28%,rgba(254,240,138,.85) 0 16%,transparent 16.5%),radial-gradient(circle at 20% 110%,rgba(255,255,255,.14) 0 40%,transparent 40.5%),linear-gradient(135deg,#7c2d12,#d97706)" href="#video-copper" aria-label="Play video: how Copperleaf Bakery plans its ovens, 1 minute 48 seconds"><span class="cs-in"><span class="cs-wm" aria-hidden="true">Copperleaf</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="badge cs-time" aria-hidden="true">1:48</span></span></a>
<div class="card-body">
<p class="cs-metric d-flex flex-column"><strong>6 hrs</strong>saved on rota planning every week</p>
<blockquote class="mb-0"><p class="mb-0">The bake schedule and the staff rota finally live in one place, so nobody turns up to an empty oven.</p></blockquote>
</div>
<figcaption class="d-flex align-items-center"><span class="cs-av" style="--av:#b45309" aria-hidden="true">HL</span><span><span class="d-block fw-bold">Hannah Lindqvist</span><span class="d-block cs-role">Finance Director, Copperleaf Bakery</span></span></figcaption>
</figure></li>
<li class="col"><figure class="card cs-card h-100 mb-0">
<a class="cs-poster ratio ratio-16x9" style="--art:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),linear-gradient(135deg,#134e4a,#059669)" href="#video-quill" aria-label="Play video: how Quillstone Architects onboard new staff, 3 minutes 5 seconds"><span class="cs-in"><span class="cs-wm" aria-hidden="true">Quillstone</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="badge cs-time" aria-hidden="true">3:05</span></span></a>
<div class="card-body">
<p class="cs-metric d-flex flex-column"><strong>2 days</strong>to onboard a new architect, down from a week</p>
<blockquote class="mb-0"><p class="mb-0">New starters open one project space and find every drawing, decision and contact they need.</p></blockquote>
</div>
<figcaption class="d-flex align-items-center"><span class="cs-av" style="--av:#047857" aria-hidden="true">MB</span><span><span class="d-block fw-bold">Marcus Bell</span><span class="d-block cs-role">Studio Manager, Quillstone Architects</span></span></figcaption>
</figure></li>
</ul>
</section></div>
<div><span class="lbl">Case study feature with three results</span>
<article class="card cs cf" aria-labelledby="cf-title">
<div class="row g-0 align-items-center column-gap-lg-5 row-gap-4">
<div class="col-lg"><a class="cs-poster ratio ratio-4x3" style="--art:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,255,255,.16) 0 50%,transparent 51%),radial-gradient(ellipse 60% 40% at 30% 100%,rgba(255,255,255,.12) 0 60%,transparent 61%),linear-gradient(160deg,#312e81,#7c3aed)" href="#video-saltmarsh" aria-label="Play video: the Saltmarsh Foods story, 4 minutes 20 seconds"><span class="cs-in"><span class="cs-wm" aria-hidden="true">Saltmarsh Foods</span><span class="cs-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="badge cs-time" aria-hidden="true">4:20</span></span></a></div>
<div class="col-lg cf-body">
<p class="cf-kicker mb-0" id="cf-title">Case study · Saltmarsh Foods</p>
<figure class="mt-3 mb-0">
<blockquote class="mb-0"><p class="mb-0">Month-end used to swallow the second week of every month. Now the numbers are ready on the third working day, and the finance team spends the time it saved on pricing.</p></blockquote>
<figcaption class="mt-3"><strong>Noor Haddad</strong>, Controller, Saltmarsh Foods</figcaption>
</figure>
<dl class="cf-stats d-grid mt-4 mb-0">
<div class="cf-stat"><dt>to close the month, down from 12</dt><dd>3 days</dd></div>
<div class="cf-stat"><dt>checklist steps, down from 41</dt><dd>12</dd></div>
<div class="cf-stat"><dt>saved a year on overtime</dt><dd>£58k</dd></div>
</dl>
<a class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover link-offset-1 d-inline-flex align-items-center gap-2 mt-4" href="#case-study-saltmarsh">Read the case study <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
</div>
</div>
</article></div>
CSS
/* Bootstrap: .card with a .ratio poster link, .row-cols grid, and .row.g-0 for the feature.
The poster artwork, play button and stat tiles are the small custom part. */
.cs{--cs-ink:#0f172a;--cs-muted:#475569;--cs-line:#e2e8f0;--cs-accent:#4338ca;color:var(--cs-ink)}
.cs-card{--bs-card-border-color:var(--cs-line);--bs-card-border-radius:22px;padding:12px;box-shadow:0 18px 40px -30px rgba(15,23,42,.45)}
.cs-poster{display:block;border-radius:14px;overflow:hidden;background:var(--art);color:#fff;text-decoration:none}
.cs-poster>.cs-in{display:grid;place-items:center}
.cs-poster:focus-visible{outline:3px solid var(--cs-accent);outline-offset:3px}
.cs-wm{position:absolute;left:16px;bottom:12px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.cs-time{position:absolute;right:12px;bottom:12px;--bs-badge-padding-x:8px;--bs-badge-padding-y:2px;--bs-badge-font-size:.75rem;--bs-badge-border-radius:6px;
line-height:1.5;background:rgba(15,23,42,.72);font-variant-numeric:tabular-nums}
.cs-play{display:grid;place-items:center;width:60px;height:60px;padding-left:3px;border-radius:50%;background:#fff;color:var(--cs-accent);
box-shadow:0 0 0 8px rgba(255,255,255,.25);transition:transform .2s}
.cs-poster:hover .cs-play,.cs-poster:focus-visible .cs-play{transform:scale(1.08)}
.cs-card .card-body{--bs-card-spacer-x:12px;--bs-card-spacer-y:0;padding-top:20px}
.cs-metric{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--cs-line);font-size:.9rem;color:var(--cs-muted)}
.cs-metric strong{font-size:2rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--cs-accent)}
.cs-card blockquote{line-height:1.6}
.cs-card figcaption{padding:18px 12px 10px;gap:12px}
.cs-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--av);color:#fff;font-size:.85rem;font-weight:700}
.cs-role{font-size:.85rem;line-height:1.4;color:var(--cs-muted)}
.cf{--bs-card-border-color:var(--cs-line);--bs-card-border-radius:26px;padding:14px;box-shadow:0 24px 50px -34px rgba(15,23,42,.5)}
@media (min-width:992px){.cf{padding:16px 40px 16px 16px}}
.cf .cs-poster{border-radius:18px}
.cf .cs-wm{left:22px;bottom:18px;font-size:1.4rem}
.cf .cs-time{right:18px;bottom:18px}
.cf .cs-play{width:76px;height:76px}
.cf-body{padding:8px 10px 14px}
.cf-kicker{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-accent)}
.cf blockquote{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);font-weight:500;line-height:1.5}
.cf figcaption{font-size:.9rem;color:var(--cs-muted)}
.cf figcaption strong{color:var(--cs-ink)}
.cf-stats{grid-template-columns:repeat(3,1fr);gap:12px}
.cf-stats .cf-stat{height:100%;padding:14px;border-radius:14px;background:#eef2ff;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.cf-stats dt{font-size:.8rem;font-weight:400;line-height:1.35;color:#3730a3}
.cf-stats dd{margin:0 0 4px;font-size:clamp(1.2rem,1rem + 1vw,1.5rem);font-weight:800;letter-spacing:-.02em}
.cf .link-primary{--bs-link-color-rgb:67,56,202;--bs-link-hover-color-rgb:55,48,163;font-weight:700;border-radius:4px}
.cf .link-primary:focus-visible{outline:3px solid var(--cs-accent);outline-offset:3px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.cs-play{transition:none}.cs-poster:hover .cs-play,.cs-poster:focus-visible .cs-play{transform:none}}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Video testimonial cards with a result</span>
<section aria-label="Customer videos">
<ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3" role="list">
<li class="flex"><figure class="flex flex-1 flex-col rounded-[22px] border border-[#e2e8f0] bg-white p-3 shadow-[0_18px_40px_-30px_rgba(15,23,42,.45)]">
<a class="group relative grid place-items-center overflow-hidden text-white no-underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4338ca] aspect-video rounded-[14px] bg-[repeating-linear-gradient(115deg,rgba(255,255,255,.09)_0_14px,transparent_14px_28px),linear-gradient(135deg,#1e3a8a,#0284c7)]" href="#video-tide" aria-label="Play video: how Tidewater Freight cut missed deliveries, 2 minutes 14 seconds"><span class="absolute bottom-3 left-4 text-[1.05rem] font-extrabold tracking-[-.02em] [text-shadow:0_1px_8px_rgba(0,0,0,.25)]" aria-hidden="true">Tidewater</span><span class="grid place-items-center rounded-full bg-white pl-[3px] text-[#4338ca] shadow-[0_0_0_8px_rgba(255,255,255,.25)] transition-transform duration-200 group-hover:scale-[1.08] group-focus-visible:scale-[1.08] motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100 size-[60px]" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="absolute rounded-md bg-[rgba(15,23,42,.72)] px-2 py-0.5 text-[.75rem] font-bold tabular-nums right-3 bottom-3" aria-hidden="true">2:14</span></a>
<div class="flex-1 px-3 pt-5">
<p class="mb-4 flex flex-col border-b border-[#e2e8f0] pb-4 text-[.9rem] text-[#475569]"><strong class="text-[2rem] leading-[1.1] font-extrabold tracking-[-.03em] text-[#4338ca]">38%</strong>fewer missed deliveries in six months</p>
<blockquote class="leading-[1.6] text-[#0f172a]"><p>Drivers see changes the minute dispatch makes them. The calls asking where a pallet went have almost stopped.</p></blockquote>
</div>
<figcaption class="flex items-center gap-3 px-3 pt-[18px] pb-2.5"><span class="grid size-10 flex-none place-items-center rounded-full bg-[#1d4ed8] text-[.85rem] font-bold text-white" aria-hidden="true">TO</span><span><span class="block font-bold text-[#0f172a]">Tomás Okafor</span><span class="block text-[.85rem] leading-[1.4] text-[#475569]">Logistics Lead, Tidewater Freight</span></span></figcaption>
</figure></li>
<li class="flex"><figure class="flex flex-1 flex-col rounded-[22px] border border-[#e2e8f0] bg-white p-3 shadow-[0_18px_40px_-30px_rgba(15,23,42,.45)]">
<a class="group relative grid place-items-center overflow-hidden text-white no-underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4338ca] aspect-video rounded-[14px] bg-[radial-gradient(circle_at_78%_28%,rgba(254,240,138,.85)_0_16%,transparent_16.5%),radial-gradient(circle_at_20%_110%,rgba(255,255,255,.14)_0_40%,transparent_40.5%),linear-gradient(135deg,#7c2d12,#d97706)]" href="#video-copper" aria-label="Play video: how Copperleaf Bakery plans its ovens, 1 minute 48 seconds"><span class="absolute bottom-3 left-4 text-[1.05rem] font-extrabold tracking-[-.02em] [text-shadow:0_1px_8px_rgba(0,0,0,.25)]" aria-hidden="true">Copperleaf</span><span class="grid place-items-center rounded-full bg-white pl-[3px] text-[#4338ca] shadow-[0_0_0_8px_rgba(255,255,255,.25)] transition-transform duration-200 group-hover:scale-[1.08] group-focus-visible:scale-[1.08] motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100 size-[60px]" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="absolute rounded-md bg-[rgba(15,23,42,.72)] px-2 py-0.5 text-[.75rem] font-bold tabular-nums right-3 bottom-3" aria-hidden="true">1:48</span></a>
<div class="flex-1 px-3 pt-5">
<p class="mb-4 flex flex-col border-b border-[#e2e8f0] pb-4 text-[.9rem] text-[#475569]"><strong class="text-[2rem] leading-[1.1] font-extrabold tracking-[-.03em] text-[#4338ca]">6 hrs</strong>saved on rota planning every week</p>
<blockquote class="leading-[1.6] text-[#0f172a]"><p>The bake schedule and the staff rota finally live in one place, so nobody turns up to an empty oven.</p></blockquote>
</div>
<figcaption class="flex items-center gap-3 px-3 pt-[18px] pb-2.5"><span class="grid size-10 flex-none place-items-center rounded-full bg-[#b45309] text-[.85rem] font-bold text-white" aria-hidden="true">HL</span><span><span class="block font-bold text-[#0f172a]">Hannah Lindqvist</span><span class="block text-[.85rem] leading-[1.4] text-[#475569]">Finance Director, Copperleaf Bakery</span></span></figcaption>
</figure></li>
<li class="flex"><figure class="flex flex-1 flex-col rounded-[22px] border border-[#e2e8f0] bg-white p-3 shadow-[0_18px_40px_-30px_rgba(15,23,42,.45)]">
<a class="group relative grid place-items-center overflow-hidden text-white no-underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4338ca] aspect-video rounded-[14px] bg-[repeating-linear-gradient(0deg,rgba(255,255,255,.1)_0_1px,transparent_1px_24px),repeating-linear-gradient(90deg,rgba(255,255,255,.1)_0_1px,transparent_1px_24px),linear-gradient(135deg,#134e4a,#059669)]" href="#video-quill" aria-label="Play video: how Quillstone Architects onboard new staff, 3 minutes 5 seconds"><span class="absolute bottom-3 left-4 text-[1.05rem] font-extrabold tracking-[-.02em] [text-shadow:0_1px_8px_rgba(0,0,0,.25)]" aria-hidden="true">Quillstone</span><span class="grid place-items-center rounded-full bg-white pl-[3px] text-[#4338ca] shadow-[0_0_0_8px_rgba(255,255,255,.25)] transition-transform duration-200 group-hover:scale-[1.08] group-focus-visible:scale-[1.08] motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100 size-[60px]" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="absolute rounded-md bg-[rgba(15,23,42,.72)] px-2 py-0.5 text-[.75rem] font-bold tabular-nums right-3 bottom-3" aria-hidden="true">3:05</span></a>
<div class="flex-1 px-3 pt-5">
<p class="mb-4 flex flex-col border-b border-[#e2e8f0] pb-4 text-[.9rem] text-[#475569]"><strong class="text-[2rem] leading-[1.1] font-extrabold tracking-[-.03em] text-[#4338ca]">2 days</strong>to onboard a new architect, down from a week</p>
<blockquote class="leading-[1.6] text-[#0f172a]"><p>New starters open one project space and find every drawing, decision and contact they need.</p></blockquote>
</div>
<figcaption class="flex items-center gap-3 px-3 pt-[18px] pb-2.5"><span class="grid size-10 flex-none place-items-center rounded-full bg-[#047857] text-[.85rem] font-bold text-white" aria-hidden="true">MB</span><span><span class="block font-bold text-[#0f172a]">Marcus Bell</span><span class="block text-[.85rem] leading-[1.4] text-[#475569]">Studio Manager, Quillstone Architects</span></span></figcaption>
</figure></li>
</ul>
</section></div>
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Case study feature with three results</span>
<article class="grid items-center gap-[clamp(20px,3vw,40px)] rounded-[26px] border border-[#e2e8f0] bg-white p-3.5 shadow-[0_24px_50px_-34px_rgba(15,23,42,.5)] lg:grid-cols-[1.05fr_1fr] lg:py-4 lg:pr-10 lg:pl-4" aria-labelledby="cf-title">
<a class="group relative grid place-items-center overflow-hidden text-white no-underline focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4338ca] aspect-[4/3] rounded-[18px] bg-[radial-gradient(ellipse_80%_50%_at_50%_100%,rgba(255,255,255,.16)_0_50%,transparent_51%),radial-gradient(ellipse_60%_40%_at_30%_100%,rgba(255,255,255,.12)_0_60%,transparent_61%),linear-gradient(160deg,#312e81,#7c3aed)]" href="#video-saltmarsh" aria-label="Play video: the Saltmarsh Foods story, 4 minutes 20 seconds"><span class="absolute bottom-[18px] left-[22px] text-[1.4rem] font-extrabold tracking-[-.02em] [text-shadow:0_1px_8px_rgba(0,0,0,.25)]" aria-hidden="true">Saltmarsh Foods</span><span class="grid place-items-center rounded-full bg-white pl-[3px] text-[#4338ca] shadow-[0_0_0_8px_rgba(255,255,255,.25)] transition-transform duration-200 group-hover:scale-[1.08] group-focus-visible:scale-[1.08] motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100 size-[76px]" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg></span><span class="absolute rounded-md bg-[rgba(15,23,42,.72)] px-2 py-0.5 text-[.75rem] font-bold tabular-nums right-[18px] bottom-[18px]" aria-hidden="true">4:20</span></a>
<div class="px-2.5 pt-2 pb-3.5">
<p class="text-[.78rem] font-extrabold tracking-[.14em] text-[#4338ca] uppercase" id="cf-title">Case study · Saltmarsh Foods</p>
<figure class="mt-3.5">
<blockquote class="text-[clamp(1.1rem,1rem+.5vw,1.3rem)] leading-[1.5] font-medium text-[#0f172a]"><p>Month-end used to swallow the second week of every month. Now the numbers are ready on the third working day, and the finance team spends the time it saved on pricing.</p></blockquote>
<figcaption class="mt-3.5 text-[.9rem] text-[#475569]"><strong class="text-[#0f172a]">Noor Haddad</strong>, Controller, Saltmarsh Foods</figcaption>
</figure>
<dl class="mt-6 grid grid-cols-3 gap-3">
<div class="flex flex-col-reverse justify-end rounded-[14px] bg-[#eef2ff] p-3.5"><dt class="text-[.8rem] leading-[1.35] text-[#3730a3]">to close the month, down from 12</dt><dd class="mb-1 text-[clamp(1.2rem,1rem+1vw,1.5rem)] font-extrabold tracking-[-.02em] text-[#0f172a]">3 days</dd></div>
<div class="flex flex-col-reverse justify-end rounded-[14px] bg-[#eef2ff] p-3.5"><dt class="text-[.8rem] leading-[1.35] text-[#3730a3]">checklist steps, down from 41</dt><dd class="mb-1 text-[clamp(1.2rem,1rem+1vw,1.5rem)] font-extrabold tracking-[-.02em] text-[#0f172a]">12</dd></div>
<div class="flex flex-col-reverse justify-end rounded-[14px] bg-[#eef2ff] p-3.5"><dt class="text-[.8rem] leading-[1.35] text-[#3730a3]">saved a year on overtime</dt><dd class="mb-1 text-[clamp(1.2rem,1rem+1vw,1.5rem)] font-extrabold tracking-[-.02em] text-[#0f172a]">£58k</dd></div>
</dl>
<a class="mt-[22px] inline-flex items-center gap-1.5 rounded font-bold text-[#4338ca] no-underline hover:underline hover:underline-offset-3 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4338ca]" href="#case-study-saltmarsh">Read the case study <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a>
</div>
</article></div>
About this set
Customer stories that lead with a video and a number. The video testimonial cards put a 16:9 poster above each quote: CSS gradient artwork with the company name, a round play button and a duration badge, followed by a headline result such as 38% fewer missed deliveries, a short quote and the customer’s initials avatar, name and role. The case study feature gives one customer a wide card with a large 4:3 poster, the quote and attribution, three result tiles in a description list and a Read the case study link. Each poster is a single link to the video or story page, so the section loads no video player and no video file, and the artwork is pure CSS, so there are no photos of people to source. Swap the gradients for real thumbnails when you have them. The play button grows slightly on hover and keyboard focus, and that movement stops under reduced motion.
What’s included
Three video cards and a wide case study feature
Poster is one link with the title and length in its label
Headline metric per card and three result tiles
CSS gradient poster artwork, no images or video files
Bootstrap version uses .ratio for the posters
Accessibility
Each poster link is named in full, for example Play video: how Tidewater Freight cut missed deliveries, 2 minutes 14 seconds, and its decorative contents are aria-hidden. Results in the feature are a description list. Links show a 3px indigo focus outline, and the hover scale on the play button is removed under prefers-reduced-motion.
Customise it
Change --cs-accent, --cs-ink and --cs-line on .cs and the poster artwork through --art on each .cs-poster. Bootstrap uses the same variables with .ratio-16x9 or .ratio-4x3; in Tailwind edit the bg-[...] gradient and aspect-video or aspect-[4/3].
