<div><span class="lbl">Centred statement with a company wordmark</span>
<figure class="fq">
<p class="fq-wm">Kestrel <i>&</i> Vale</p>
<blockquote><p>We moved forty-two clinics onto one schedule in a single weekend. On Monday the phones were quieter than they had been in years, and the front desk finally had time to look up and say hello.</p></blockquote>
<figcaption><span class="fq-av" aria-hidden="true">AO</span><span><span class="fq-name">Dr. Amara Osei</span><span class="fq-role">Chief Operating Officer, Kestrel & Vale Health</span></span></figcaption>
</figure></div>
<div><span class="lbl">Split layout with an abstract portrait</span>
<figure class="fs">
<div class="fs-art" aria-hidden="true"></div>
<div class="fs-body">
<p class="fs-wm">pebble<span>/</span>post</p>
<blockquote><p>We tested four tools with real campaigns before we chose this one. It is the only one our designers still open without being asked, and our launch reviews now take twenty minutes instead of a morning.</p></blockquote>
<figcaption><span><span class="fs-name">Inês Duarte</span><span class="fs-role">Head of Brand, Pebble Post</span></span>
<a class="fs-link" href="#story-pebble-post">Read the story <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></figcaption>
</div>
</figure></div>
CSS
/* Featured testimonials: one quote given the whole width. The company is a text wordmark (no logo file),
the person an initials avatar or an abstract CSS portrait. Markup is figure > blockquote + figcaption. */
.fq{--fq-bg:#fbf6ef;--fq-ink:#1c1917;--fq-muted:#57534e;--fq-accent:#b45309;
margin:0;padding:clamp(40px,6vw,72px) clamp(22px,5vw,64px);text-align:center;border-radius:28px;
background:radial-gradient(120% 80% at 50% 0%,#fff 0,rgba(255,255,255,0) 60%),var(--fq-bg);border:1px solid #eadfce}
.fq-wm{display:inline-flex;align-items:baseline;gap:.35em;font-size:.95rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#7c2d12}
.fq-wm i{font:italic 400 1.35rem/1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;color:var(--fq-accent)}
.fq blockquote{max-width:780px;margin:28px auto 0;font:400 clamp(1.4rem,1rem + 1.7vw,2.15rem)/1.38 Georgia,"Times New Roman",serif;
letter-spacing:-.01em;color:var(--fq-ink);text-wrap:balance}
.fq blockquote::before{content:"\201C";content:"\201C" / "";display:block;height:.55em;font-size:2.6em;line-height:1;color:var(--fq-accent)}
.fq figcaption{display:inline-flex;align-items:center;gap:14px;margin-top:32px;text-align:left}
.fq-av{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#9a3412;color:#fff;
font-weight:700;letter-spacing:.03em;box-shadow:0 0 0 4px var(--fq-bg),0 0 0 6px #e3cfb6}
.fq-name{display:block;font-weight:700;color:var(--fq-ink)}
.fq-role{display:block;font-size:.9rem;color:var(--fq-muted)}
/* Split layout with an abstract portrait */
.fs{--fs-ink:#0f172a;--fs-muted:#475569;--fs-accent:#0f766e;
display:grid;margin:0;overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:28px;
box-shadow:0 24px 48px -28px rgba(15,23,42,.3)}
@media (min-width:768px){.fs{grid-template-columns:5fr 7fr}}
.fs-art{min-height:240px;background:radial-gradient(circle at 50% 45%,#fcd34d 0 12%,transparent 12.5%),radial-gradient(ellipse 30% 25% at 50% 100%,#fcd34d 0 98%,transparent 100%),radial-gradient(circle at 50% 62%,#115e59 0 30%,transparent 30.5%),radial-gradient(circle at 14% 16%,rgba(255,255,255,.14) 0 9%,transparent 9.5%),radial-gradient(circle at 86% 24%,rgba(253,230,138,.22) 0 5%,transparent 5.5%),linear-gradient(160deg,#0f766e,#134e4a)}
.fs-body{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(28px,4.5vw,56px)}
.fs-wm{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--fs-ink)}
.fs-wm span{color:var(--fs-accent)}
.fs blockquote{margin:0;font-size:clamp(1.15rem,1rem + .6vw,1.4rem);font-weight:500;line-height:1.55;color:var(--fs-ink)}
.fs figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:24px;border-top:1px solid #e2e8f0}
.fs-name{display:block;font-weight:700;color:var(--fs-ink)}
.fs-role{display:block;font-size:.9rem;color:var(--fs-muted)}
.fs-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#0f766e;text-decoration:none;border-radius:4px}
.fs-link:hover{text-decoration:underline;text-underline-offset:3px}
.fs-link:focus-visible{outline:3px solid #0f766e;outline-offset:3px}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Centred statement with a company wordmark</span>
<figure class="fq text-center mb-0">
<p class="fq-wm mb-0">Kestrel <i>&</i> Vale</p>
<blockquote class="blockquote"><p class="mb-0">We moved forty-two clinics onto one schedule in a single weekend. On Monday the phones were quieter than they had been in years, and the front desk finally had time to look up and say hello.</p></blockquote>
<figcaption class="d-inline-flex align-items-center gap-3 text-start"><span class="fq-av" aria-hidden="true">AO</span><span><span class="d-block fw-bold">Dr. Amara Osei</span><span class="d-block fq-role">Chief Operating Officer, Kestrel & Vale Health</span></span></figcaption>
</figure></div>
<div><span class="lbl">Split layout with an abstract portrait</span>
<figure class="card fs overflow-hidden mb-0">
<div class="row g-0">
<div class="col-md-5"><div class="fs-art" aria-hidden="true"></div></div>
<div class="col-md-7 card-body d-flex flex-column justify-content-center gap-4">
<p class="fs-wm mb-0">pebble<span>/</span>post</p>
<blockquote class="mb-0"><p class="mb-0">We tested four tools with real campaigns before we chose this one. It is the only one our designers still open without being asked, and our launch reviews now take twenty minutes instead of a morning.</p></blockquote>
<figcaption class="d-flex flex-wrap align-items-center justify-content-between column-gap-4 row-gap-3"><span><span class="d-block fw-bold">Inês Duarte</span><span class="d-block fs-role">Head of Brand, Pebble Post</span></span>
<a class="link-success link-underline-opacity-0 link-underline-opacity-100-hover link-offset-1 d-inline-flex align-items-center gap-2" href="#story-pebble-post">Read the story <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></figcaption>
</div>
</div>
</figure></div>
CSS
/* Bootstrap: .blockquote and .card with .row.g-0 for the split; colours through CSS variables. */
.fq{--fq-bg:#fbf6ef;--fq-ink:#1c1917;--fq-muted:#57534e;--fq-accent:#b45309;
padding:clamp(40px,6vw,72px) clamp(22px,5vw,64px);border-radius:28px;
background:radial-gradient(120% 80% at 50% 0%,#fff 0,rgba(255,255,255,0) 60%),var(--fq-bg);border:1px solid #eadfce}
.fq-wm{display:inline-flex;align-items:baseline;gap:.35em;font-size:.95rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#7c2d12}
.fq-wm i{font:italic 400 1.35rem/1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;color:var(--fq-accent)}
.fq .blockquote{max-width:780px;margin:28px auto 0;font:400 clamp(1.4rem,1rem + 1.7vw,2.15rem)/1.38 Georgia,"Times New Roman",serif;
letter-spacing:-.01em;color:var(--fq-ink);text-wrap:balance}
.fq .blockquote::before{content:"\201C";content:"\201C" / "";display:block;height:.55em;font-size:2.6em;line-height:1;color:var(--fq-accent)}
.fq-av{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#9a3412;color:#fff;
font-weight:700;letter-spacing:.03em;box-shadow:0 0 0 4px var(--fq-bg),0 0 0 6px #e3cfb6}
.fq figcaption{margin-top:32px}
.fq-role{font-size:.9rem;color:var(--fq-muted)}
.fs{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:28px;--bs-card-spacer-x:clamp(28px,4.5vw,56px);--bs-card-spacer-y:clamp(28px,4.5vw,56px);
--bs-card-color:#0f172a;color:#0f172a;box-shadow:0 24px 48px -28px rgba(15,23,42,.3)}
.fs-art{min-height:240px;height:100%;background:radial-gradient(circle at 50% 45%,#fcd34d 0 12%,transparent 12.5%),radial-gradient(ellipse 30% 25% at 50% 100%,#fcd34d 0 98%,transparent 100%),radial-gradient(circle at 50% 62%,#115e59 0 30%,transparent 30.5%),radial-gradient(circle at 14% 16%,rgba(255,255,255,.14) 0 9%,transparent 9.5%),radial-gradient(circle at 86% 24%,rgba(253,230,138,.22) 0 5%,transparent 5.5%),linear-gradient(160deg,#0f766e,#134e4a)}
.fs-wm{font-size:1.3rem;font-weight:800;letter-spacing:-.03em}
.fs-wm span{color:#0f766e}
.fs blockquote{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);font-weight:500;line-height:1.55}
.fs figcaption{padding-top:24px;border-top:1px solid #e2e8f0}
.fs-role{font-size:.9rem;color:#475569}
.fs .link-success{--bs-link-color-rgb:15,118,110;--bs-link-hover-color-rgb:17,94,89;font-weight:700;border-radius:4px}
.fs .link-success:focus-visible{outline:3px solid #0f766e;outline-offset:3px;box-shadow:none}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Centred statement with a company wordmark</span>
<figure class="rounded-[28px] border border-[#eadfce] bg-[radial-gradient(120%_80%_at_50%_0%,#fff_0,rgba(255,255,255,0)_60%),linear-gradient(#fbf6ef,#fbf6ef)] px-[clamp(22px,5vw,64px)] py-[clamp(40px,6vw,72px)] text-center">
<p class="inline-flex items-baseline gap-[.35em] text-[.95rem] font-extrabold tracking-[.28em] text-[#7c2d12] uppercase">Kestrel <i class="font-[Georgia,'Times_New_Roman',serif] text-[1.35rem] leading-none font-normal tracking-normal text-[#b45309] normal-case">&</i> Vale</p>
<blockquote class="mx-auto mt-7 max-w-[780px] font-[Georgia,'Times_New_Roman',serif] text-[clamp(1.4rem,1rem+1.7vw,2.15rem)] leading-[1.38] tracking-[-.01em] text-balance text-[#1c1917] before:block before:h-[.55em] before:text-[2.6em] before:leading-none before:text-[#b45309] before:content-['“']"><p>We moved forty-two clinics onto one schedule in a single weekend. On Monday the phones were quieter than they had been in years, and the front desk finally had time to look up and say hello.</p></blockquote>
<figcaption class="mt-8 inline-flex items-center gap-[14px] text-left"><span class="grid size-14 flex-none place-items-center rounded-full bg-[#9a3412] font-bold tracking-[.03em] text-white shadow-[0_0_0_4px_#fbf6ef,0_0_0_6px_#e3cfb6]" aria-hidden="true">AO</span><span><span class="block font-bold text-[#1c1917]">Dr. Amara Osei</span><span class="block text-[.9rem] text-[#57534e]">Chief Operating Officer, Kestrel & Vale Health</span></span></figcaption>
</figure></div>
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Split layout with an abstract portrait</span>
<figure class="grid overflow-hidden rounded-[28px] border border-[#e2e8f0] bg-white shadow-[0_24px_48px_-28px_rgba(15,23,42,.3)] md:grid-cols-[5fr_7fr]">
<div class="min-h-[240px] bg-[radial-gradient(circle_at_50%_45%,#fcd34d_0_12%,transparent_12.5%),radial-gradient(ellipse_30%_25%_at_50%_100%,#fcd34d_0_98%,transparent_100%),radial-gradient(circle_at_50%_62%,#115e59_0_30%,transparent_30.5%),radial-gradient(circle_at_14%_16%,rgba(255,255,255,.14)_0_9%,transparent_9.5%),radial-gradient(circle_at_86%_24%,rgba(253,230,138,.22)_0_5%,transparent_5.5%),linear-gradient(160deg,#0f766e,#134e4a)]" aria-hidden="true"></div>
<div class="flex flex-col justify-center gap-6 p-[clamp(28px,4.5vw,56px)]">
<p class="text-[1.3rem] font-extrabold tracking-[-.03em] text-[#0f172a]">pebble<span class="text-[#0f766e]">/</span>post</p>
<blockquote class="text-[clamp(1.15rem,1rem+.6vw,1.4rem)] leading-[1.55] font-medium text-[#0f172a]"><p>We tested four tools with real campaigns before we chose this one. It is the only one our designers still open without being asked, and our launch reviews now take twenty minutes instead of a morning.</p></blockquote>
<figcaption class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4 border-t border-[#e2e8f0] pt-6"><span><span class="block font-bold text-[#0f172a]">Inês Duarte</span><span class="block text-[.9rem] text-[#475569]">Head of Brand, Pebble Post</span></span>
<a class="inline-flex items-center gap-1.5 rounded font-bold text-[#0f766e] no-underline hover:underline hover:underline-offset-3 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#story-pebble-post">Read the story <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></figcaption>
</div>
</figure></div>
About this set
One customer quote given the whole width of the page, for the moment in a landing page where a single strong endorsement does more than a grid. The set has two variants. The centred statement sets the quote in a large Georgia serif on a warm cream panel, under the customer’s company written as a spaced capital wordmark with an italic ampersand, and closes with a ringed initials avatar, name and job title. The split layout pairs an abstract portrait drawn with CSS gradients, a head and shoulders shape on teal, with a white panel holding a lowercase wordmark, the quote, the attribution and a Read the story link. The company names are plain text styled as wordmarks, so there are no logo files to collect or licence, and the portrait is pure CSS, so there is no stock photo of a person. The quote is a blockquote inside a figure with a figcaption, and both layouts collapse to a single column on phones.
What’s included
Centred serif statement and split layout with portrait
Company names as styled text wordmarks, no logo files
Abstract head and shoulders portrait drawn with CSS gradients
Fluid quote size with clamp() and balanced line breaks
Single column on phones, two columns from 768px
Accessibility
The quote and its attribution are a blockquote and figcaption inside one figure. The avatar and the CSS portrait are aria-hidden, and the wordmark is real text that screen readers read as the company name. The Read the story link has a visible text label and a 3px teal focus outline.
Customise it
In plain CSS change --fq-bg, --fq-accent and --fq-ink on .fq, and the teal values in the portrait gradient on .fs-art. Bootstrap uses the same variables plus --bs-card-* on .fs; in Tailwind edit the hex values in the bg-, text- and border- utilities.
