Open demo

CSS code

HTML 
<div><span class="lbl">Three-column cards with a section heading</span>
<section class="tg" aria-labelledby="tg-title">
  <div class="tg-head"><p class="tg-kicker">Customer stories</p><h2 id="tg-title">What teams say after their first quarter</h2><p>Three of the 1,200 studios, warehouses and kitchens that plan their week in Plotwise.</p></div>
  <ul class="tg-grid" role="list">
  <li><figure class="tg-card">
    <blockquote><p>We used to lose a day every month chasing approvals. Now the whole sign-off happens next to the work, and nobody asks where the latest file is.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#0f766e" aria-hidden="true">PR</span><span><span class="tg-name">Priya Raman</span><span class="tg-role">Head of Operations, Fernhill Studio</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>Setup took one afternoon. By Friday the warehouse team had stopped printing the schedule, which I did not expect to see this year.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#4338ca" aria-hidden="true">TO</span><span><span class="tg-name">Tomás Okafor</span><span class="tg-role">Logistics Lead, Tidewater Freight</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>The reporting is the part I did not expect to love. I send the board the same dashboard I read every morning, and it takes two clicks.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#b45309" aria-hidden="true">HL</span><span><span class="tg-name">Hannah Lindqvist</span><span class="tg-role">Finance Director, Copperleaf Bakery</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>

<div><span class="lbl">Compact six-card grid with an accent card</span>
<section class="tg" aria-label="More customer quotes">
  <ul class="tg-grid tg-grid--compact" role="list">
  <li><figure class="tg-card">
    <blockquote><p>Onboarding a new hire went from a week of shadowing to two days.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#be123c" aria-hidden="true">MB</span><span><span class="tg-name">Marcus Bell</span><span class="tg-role">Studio Manager, Quillstone Architects</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>It replaced three spreadsheets and a whiteboard. The whiteboard was the hardest to let go.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#0369a1" aria-hidden="true">AT</span><span><span class="tg-name">Aiko Tanaka</span><span class="tg-role">Producer, Orbital Nine</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card tg-card--accent">
    <blockquote><p>Our clients see progress without asking for it. Status calls dropped from weekly to monthly.</p></blockquote>
    <figcaption><span class="tg-av" aria-hidden="true">DM</span><span><span class="tg-name">Daniel Mensah</span><span class="tg-role">Account Director, Harbor & Pine</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>Support answered at seven on a Sunday morning, and the answer was right.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#15803d" aria-hidden="true">SF</span><span><span class="tg-name">Sofia Ferreira</span><span class="tg-role">Owner, Ferreira Dental</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>The mobile app is what won over the crew. They update jobs from the van now.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#7e22ce" aria-hidden="true">LO</span><span><span class="tg-name">Liam O’Connor</span><span class="tg-role">Site Supervisor, Brackenridge Build</span></span></figcaption>
  </figure></li>
  <li><figure class="tg-card">
    <blockquote><p>We cut our month-end checklist from forty-one steps to twelve.</p></blockquote>
    <figcaption><span class="tg-av" style="--av:#c2410c" aria-hidden="true">NH</span><span><span class="tg-name">Noor Haddad</span><span class="tg-role">Controller, Saltmarsh Foods</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>
CSS 
/* Testimonial cards grid: each card is a <figure> holding a <blockquote> and a <figcaption>
   with an initials avatar, the name, role and company. One column, two from 768px, three from 992px. */
.tg{--tg-ink:#0f172a;--tg-muted:#475569;--tg-line:#e2e8f0;--tg-card:#fff;--tg-accent:#4f46e5}
.tg-head{max-width:600px;margin:0 auto 40px;text-align:center}
.tg-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4338ca}
.tg-head h2{margin-top:8px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--tg-ink);text-wrap:balance}
.tg-head h2+p{margin-top:12px;font-size:1.05rem;color:var(--tg-muted)}
.tg-grid{display:grid;gap:24px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.tg-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.tg-grid{grid-template-columns:repeat(3,1fr)}}
.tg-grid>li{display:flex}
.tg-card{flex:1;display:flex;flex-direction:column;margin:0;overflow:hidden;background:var(--tg-card);
  border:1px solid var(--tg-line);border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 34px -18px rgba(15,23,42,.22)}
.tg-card blockquote{flex:1;margin:0;padding:28px;font-size:1.02rem;line-height:1.65;color:var(--tg-ink)}
.tg-card blockquote::before{content:"\201C";content:"\201C" / "";display:block;height:30px;
  font:700 3.4rem/1 Georgia,"Times New Roman",serif;color:var(--tg-accent)}
.tg-card figcaption{display:flex;align-items:center;gap:16px;padding:18px 28px;border-top:1px solid var(--tg-line)}
.tg-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--av,#4338ca);color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.03em}
.tg-name{display:block;font-weight:700;color:var(--tg-ink)}
.tg-role{display:block;font-size:.875rem;line-height:1.4;color:var(--tg-muted)}
/* Compact grid with one accent card */
.tg-grid--compact{gap:16px}
.tg-grid--compact .tg-card{border-radius:14px;box-shadow:none}
.tg-grid--compact blockquote{padding:22px 22px 18px;font-size:.97rem}
.tg-grid--compact blockquote::before{display:none}
.tg-grid--compact figcaption{padding:14px 22px}
.tg-card--accent{--tg-card:#4338ca;--tg-ink:#fff;--tg-muted:#e0e7ff;--tg-line:rgba(255,255,255,.28);border-color:#4338ca}
.tg-card--accent .tg-av{background:#fff;color:#4338ca}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Three-column cards with a section heading</span>
<section class="tg" aria-labelledby="tg-title">
  <div class="tg-head text-center"><p class="tg-kicker mb-0">Customer stories</p><h2 id="tg-title">What teams say after their first quarter</h2><p class="lead">Three of the 1,200 studios, warehouses and kitchens that plan their week in Plotwise.</p></div>
  <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 tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">We used to lose a day every month chasing approvals. Now the whole sign-off happens next to the work, and nobody asks where the latest file is.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#0f766e" aria-hidden="true">PR</span><span><span class="d-block fw-bold">Priya Raman</span><span class="d-block tg-role">Head of Operations, Fernhill Studio</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">Setup took one afternoon. By Friday the warehouse team had stopped printing the schedule, which I did not expect to see this year.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#4338ca" aria-hidden="true">TO</span><span><span class="d-block fw-bold">Tomás Okafor</span><span class="d-block tg-role">Logistics Lead, Tidewater Freight</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">The reporting is the part I did not expect to love. I send the board the same dashboard I read every morning, and it takes two clicks.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#b45309" aria-hidden="true">HL</span><span><span class="d-block fw-bold">Hannah Lindqvist</span><span class="d-block tg-role">Finance Director, Copperleaf Bakery</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>

<div><span class="lbl">Compact six-card grid with an accent card</span>
<section class="tg" aria-label="More customer quotes">
  <ul class="row row-cols-1 row-cols-md-2 row-cols-lg-3 tg-compact list-unstyled mb-0" role="list">
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">Onboarding a new hire went from a week of shadowing to two days.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#be123c" aria-hidden="true">MB</span><span><span class="d-block fw-bold">Marcus Bell</span><span class="d-block tg-role">Studio Manager, Quillstone Architects</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">It replaced three spreadsheets and a whiteboard. The whiteboard was the hardest to let go.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#0369a1" aria-hidden="true">AT</span><span><span class="d-block fw-bold">Aiko Tanaka</span><span class="d-block tg-role">Producer, Orbital Nine</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card tg-card--accent h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">Our clients see progress without asking for it. Status calls dropped from weekly to monthly.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" aria-hidden="true">DM</span><span><span class="d-block fw-bold">Daniel Mensah</span><span class="d-block tg-role">Account Director, Harbor & Pine</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">Support answered at seven on a Sunday morning, and the answer was right.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#15803d" aria-hidden="true">SF</span><span><span class="d-block fw-bold">Sofia Ferreira</span><span class="d-block tg-role">Owner, Ferreira Dental</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">The mobile app is what won over the crew. They update jobs from the van now.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#7e22ce" aria-hidden="true">LO</span><span><span class="d-block fw-bold">Liam O’Connor</span><span class="d-block tg-role">Site Supervisor, Brackenridge Build</span></span></figcaption>
  </figure></li>
  <li class="col"><figure class="card tg-card h-100 m-0">
    <blockquote class="card-body flex-grow-1 mb-0"><p class="mb-0">We cut our month-end checklist from forty-one steps to twelve.</p></blockquote>
    <figcaption class="card-footer d-flex align-items-center gap-3"><span class="tg-av" style="--av:#c2410c" aria-hidden="true">NH</span><span><span class="d-block fw-bold">Noor Haddad</span><span class="d-block tg-role">Controller, Saltmarsh Foods</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>
CSS 
/* Bootstrap .card in a .row-cols grid, restyled through the card's CSS variables. */
.tg{--tg-ink:#0f172a;--tg-muted:#475569;--tg-line:#e2e8f0;--tg-accent:#4f46e5}
.tg-head{max-width:600px;margin:0 auto 40px}
.tg-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4338ca}
.tg-head h2{margin:8px 0 0;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--tg-ink);text-wrap:balance}
.tg-head .lead{margin:12px 0 0;font-size:1.05rem;color:var(--tg-muted)}
.tg-card{--bs-card-spacer-y:28px;--bs-card-spacer-x:28px;--bs-card-cap-padding-y:18px;--bs-card-cap-padding-x:28px;
  --bs-card-cap-bg:transparent;--bs-card-border-color:var(--tg-line);--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;
  --bs-card-color:var(--tg-ink);color:var(--tg-ink);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 34px -18px rgba(15,23,42,.22)}
.tg-card blockquote{font-size:1.02rem;line-height:1.65}
.tg-card blockquote::before{content:"\201C";content:"\201C" / "";display:block;height:30px;
  font:700 3.4rem/1 Georgia,"Times New Roman",serif;color:var(--tg-accent)}
.tg-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--av,#4338ca);color:#fff;font-size:.9rem;font-weight:700;letter-spacing:.03em}
.tg-role{font-size:.875rem;line-height:1.4;color:var(--tg-muted)}
.tg-compact{--bs-gutter-x:16px;--bs-gutter-y:16px}
.tg-compact .tg-card{--bs-card-spacer-y:22px;--bs-card-spacer-x:22px;--bs-card-cap-padding-y:14px;--bs-card-cap-padding-x:22px;
  --bs-card-border-radius:14px;--bs-card-inner-border-radius:13px;box-shadow:none}
.tg-compact .tg-card .card-body{padding-bottom:18px}
.tg-compact blockquote{font-size:.97rem}
.tg-compact blockquote::before{display:none}
.tg-card--accent{--tg-ink:#fff;--tg-muted:#e0e7ff;--tg-line:rgba(255,255,255,.28);--bs-card-bg:#4338ca;--bs-card-border-color:#4338ca}
.tg-card--accent .tg-av{background:#fff;color:#4338ca}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Three-column cards with a section heading</span>
<section aria-labelledby="tg-title">
  <div class="mx-auto mb-10 max-w-[600px] text-center"><p class="text-[.8rem] font-bold tracking-[.12em] text-[#4338ca] uppercase">Customer stories</p><h2 id="tg-title" class="mt-2 text-[clamp(1.6rem,1.2rem+1.6vw,2.2rem)] leading-[1.15] font-extrabold tracking-[-.02em] text-balance text-[#0f172a]">What teams say after their first quarter</h2><p class="mt-3 text-[1.05rem] text-[#475569]">Three of the 1,200 studios, warehouses and kitchens that plan their week in Plotwise.</p></div>
  <ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3" role="list">
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_14px_34px_-18px_rgba(15,23,42,.22)] w-full">
    <blockquote class="flex-1 p-7 text-[1.02rem] leading-[1.65] text-[#0f172a] before:block before:h-[30px] before:font-[Georgia,'Times_New_Roman',serif] before:text-[3.4rem] before:leading-none before:font-bold before:text-[#4f46e5] before:content-['“']"><p>We used to lose a day every month chasing approvals. Now the whole sign-off happens next to the work, and nobody asks where the latest file is.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-7 py-[18px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#0f766e] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">PR</span><span><span class="block font-bold text-[#0f172a]">Priya Raman</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Head of Operations, Fernhill Studio</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_14px_34px_-18px_rgba(15,23,42,.22)] w-full">
    <blockquote class="flex-1 p-7 text-[1.02rem] leading-[1.65] text-[#0f172a] before:block before:h-[30px] before:font-[Georgia,'Times_New_Roman',serif] before:text-[3.4rem] before:leading-none before:font-bold before:text-[#4f46e5] before:content-['“']"><p>Setup took one afternoon. By Friday the warehouse team had stopped printing the schedule, which I did not expect to see this year.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-7 py-[18px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#4338ca] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">TO</span><span><span class="block font-bold text-[#0f172a]">Tomás Okafor</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Logistics Lead, Tidewater Freight</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_14px_34px_-18px_rgba(15,23,42,.22)] w-full">
    <blockquote class="flex-1 p-7 text-[1.02rem] leading-[1.65] text-[#0f172a] before:block before:h-[30px] before:font-[Georgia,'Times_New_Roman',serif] before:text-[3.4rem] before:leading-none before:font-bold before:text-[#4f46e5] before:content-['“']"><p>The reporting is the part I did not expect to love. I send the board the same dashboard I read every morning, and it takes two clicks.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-7 py-[18px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#b45309] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">HL</span><span><span class="block font-bold text-[#0f172a]">Hannah Lindqvist</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Finance Director, Copperleaf Bakery</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>

<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Compact six-card grid with an accent card</span>
<section aria-label="More customer quotes">
  <ul class="grid gap-4 md:grid-cols-2 lg:grid-cols-3" role="list">
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-[#0f172a]"><p>Onboarding a new hire went from a week of shadowing to two days.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#be123c] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">MB</span><span><span class="block font-bold text-[#0f172a]">Marcus Bell</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Studio Manager, Quillstone Architects</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-[#0f172a]"><p>It replaced three spreadsheets and a whiteboard. The whiteboard was the hardest to let go.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#0369a1] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">AT</span><span><span class="block font-bold text-[#0f172a]">Aiko Tanaka</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Producer, Orbital Nine</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#4338ca] bg-[#4338ca] w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-white"><p>Our clients see progress without asking for it. Status calls dropped from weekly to monthly.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-white/30 px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-white text-[#4338ca] text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">DM</span><span><span class="block font-bold text-white">Daniel Mensah</span><span class="block text-[.875rem] leading-[1.4] text-[#e0e7ff]">Account Director, Harbor & Pine</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-[#0f172a]"><p>Support answered at seven on a Sunday morning, and the answer was right.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#15803d] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">SF</span><span><span class="block font-bold text-[#0f172a]">Sofia Ferreira</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Owner, Ferreira Dental</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-[#0f172a]"><p>The mobile app is what won over the crew. They update jobs from the van now.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#7e22ce] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">LO</span><span><span class="block font-bold text-[#0f172a]">Liam O’Connor</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Site Supervisor, Brackenridge Build</span></span></figcaption>
  </figure></li>
  <li class="flex"><figure class="flex h-full flex-col overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white w-full">
    <blockquote class="flex-1 px-[22px] pt-[22px] pb-[18px] text-[.97rem] leading-[1.65] text-[#0f172a]"><p>We cut our month-end checklist from forty-one steps to twelve.</p></blockquote>
    <figcaption class="flex items-center gap-4 border-t border-[#e2e8f0] px-[22px] py-[14px]"><span class="grid size-11 flex-none place-items-center rounded-full bg-[#c2410c] text-white text-[.9rem] font-bold tracking-[.03em]" aria-hidden="true">NH</span><span><span class="block font-bold text-[#0f172a]">Noor Haddad</span><span class="block text-[.875rem] leading-[1.4] text-[#475569]">Controller, Saltmarsh Foods</span></span></figcaption>
  </figure></li>
  </ul>
</section></div>

About this set

The testimonial section most product and service sites need: a centred heading over a grid of quote cards. The set has two variants. Three-column cards with a section heading gives each quote a white card with a soft shadow, an indigo opening quotation mark, and a footer with an initials avatar, the customer’s name, role and company. The compact six-card grid fits twice as many shorter quotes into flat bordered cards and fills one of them in indigo to pull the eye to a key quote. Use the first on a home page where three strong quotes carry the section, and the compact grid lower down or on a customers page. Every card is a figure holding a blockquote and a figcaption, so the quote and the person who said it stay tied together for assistive technology. The cards sit in a list, the grid steps from one column to two at 768 pixels and three at 992, and each row of cards keeps an equal height whatever the quote length.

What’s included

  • Two layouts: three-up cards with a heading, compact six-up grid
  • figure, blockquote and figcaption markup inside a list
  • Initials avatars, no photos to source
  • Indigo accent card to highlight one quote
  • Equal-height cards in one, two or three columns

Accessibility

Each testimonial is a figure whose figcaption names the customer, inside a list so screen readers announce how many there are. Avatars are decorative and aria-hidden, since the name is printed beside them. Text, including the grey roles, meets 4.5:1 on its card, and the accent card uses white and pale indigo on indigo.

Customise it

Change --tg-accent, --tg-ink, --tg-muted and --tg-line on .tg, and each avatar colour through --av. In Bootstrap the card is restyled through --bs-card-* variables on .tg-card; in Tailwind edit the indigo and slate hex values in the utility classes.