Quotes with an attribution. An avatar is optional — supply initials instead and the card draws its own monogram, so a row stays even when only some people sent a photo.
These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.
The default. These carry initials rather than photographs — the monogram is the fallback, not a lesser variant.
In their words
We stopped writing bespoke pages. Editors compose from the same blocks we build with, and the two finally cannot drift.
The field contract is the whole trick. One frontmatter block and the CMS already knows what the component wants.
It looks like our brand because the tokens are ours. Nothing was overridden to get there.
<section class="py-6">
<div class="mk-container">
<div class="mk-title-block mk-title-block--center">
<p class="mk-eyebrow text-uppercase fw-semibold mb-2">In their words</p>
<h2 class="mb-2">What people do with it.</h2>
</div>
<div class="mk-row mk-row--3up">
<div>
<figure class="mk-testimonial h-100 p-4 p-lg-5 mb-0">
<i class="bi bi-quote"></i>
<blockquote class="mb-4 mt-2">
<p class="mb-0">We stopped writing bespoke pages. Editors compose from the same blocks we build with, and the two finally cannot drift.</p>
</blockquote>
<figcaption class="d-flex align-items-center gap-3">
<span class="mk-avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">DW</span>
<span>
<span class="d-block fw-semibold">Dana Whitfield</span>
<span class="d-block small text-body-secondary">Web lead, Riverside College</span>
</span>
</figcaption>
</figure>
</div>
<div>
<figure class="mk-testimonial h-100 p-4 p-lg-5 mb-0">
<i class="bi bi-quote"></i>
<blockquote class="mb-4 mt-2">
<p class="mb-0">The field contract is the whole trick. One frontmatter block and the CMS already knows what the component wants.</p>
</blockquote>
<figcaption class="d-flex align-items-center gap-3">
<span class="mk-avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">MI</span>
<span>
<span class="d-block fw-semibold">Marco Iyer</span>
<span class="d-block small text-body-secondary">Developer</span>
</span>
</figcaption>
</figure>
</div>
<div>
<figure class="mk-testimonial h-100 p-4 p-lg-5 mb-0">
<i class="bi bi-quote"></i>
<blockquote class="mb-4 mt-2">
<p class="mb-0">It looks like our brand because the tokens are ours. Nothing was overridden to get there.</p>
</blockquote>
<figcaption class="d-flex align-items-center gap-3">
<span class="mk-avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">PR</span>
<span>
<span class="d-block fw-semibold">Priya Raman</span>
<span class="d-block small text-body-secondary">Creative director</span>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
</section>eyebrow: In their words
title: What people do with it.
items: [3 items]Fewer, wider cards — the shape for longer quotes.
We had eleven versions of the same section header across the site. Now there is one, and the eleven pages that used it got shorter.
I can hand a page to someone who has never seen the codebase and they compose something that looks like it belongs.
<section class="py-6 surface-muted">
<div class="mk-container">
<div class="mk-title-block mk-title-block--center">
<h2 class="mb-2">Two, at length.</h2>
</div>
<div class="mk-row mk-row--2up">
<div>
<figure class="mk-testimonial h-100 p-4 p-lg-5 mb-0">
<i class="bi bi-quote"></i>
<blockquote class="mb-4 mt-2">
<p class="mb-0">We had eleven versions of the same section header across the site. Now there is one, and the eleven pages that used it got shorter.</p>
</blockquote>
<figcaption class="d-flex align-items-center gap-3">
<span class="mk-avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">DW</span>
<span>
<span class="d-block fw-semibold">Dana Whitfield</span>
<span class="d-block small text-body-secondary">Web lead</span>
</span>
</figcaption>
</figure>
</div>
<div>
<figure class="mk-testimonial h-100 p-4 p-lg-5 mb-0">
<i class="bi bi-quote"></i>
<blockquote class="mb-4 mt-2">
<p class="mb-0">I can hand a page to someone who has never seen the codebase and they compose something that looks like it belongs.</p>
</blockquote>
<figcaption class="d-flex align-items-center gap-3">
<span class="mk-avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">PR</span>
<span>
<span class="d-block fw-semibold">Priya Raman</span>
<span class="d-block small text-body-secondary">Creative director</span>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
</section>column_count: 2
surface: muted
title: Two, at length.
items: [2 items]| Field | Type | Notes |
|---|---|---|
eyebrow |
text | |
title |
text | |
intro |
textarea | |
column_count |
number | Cards per row at lg (2 or 3) — two at tablet, one on phones |
surface |
text | empty (page), muted, subtle, primary, or dark |
container |
text | |
shape_bottom |
group | Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing. |
shape_top |
group | The same, on the band's TOP edge — it hangs upward over the band above. |
class_names |
text | |
items |
repeater |