A story teaser in two arrangements — horizontal (image beside body) or stacked (image on top) — with author and date.
<article class="article-card mk-lift mk-shadow mk-highlight article-card--media-right">
<a class="article-card__media" href="#" aria-label="How Accent rebuilt its site as composable partials." style="background-image:url('/assets/img/everlasting.jpg')">
<span class="article-card__badge">Featured</span>
</a>
<div class="article-card__body">
<a class="text-decoration-none text-reset" href="#">
<h3 class="h4 mb-2">How Accent rebuilt its site as composable partials.</h3>
<p class="text-body-secondary mb-0">A behind-the-scenes look at moving from hand-written pages to a design system.</p>
</a>
<div class="article-card__meta">
<hr class="article-card__divider">
<div class="d-flex align-items-center gap-2">
<span class="mk-avatar article-card__avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">AH</span>
<span class="small fw-semibold text-uppercase">Ab Hadley</span>
<time class="small text-uppercase text-body-secondary ms-auto" datetime="2026-07-23">Jul 23</time>
</div>
</div>
</div>
</article>title: How Accent rebuilt its site as composable partials.
excerpt: A behind-the-scenes look at moving from hand-written pages to a design system.
image: /assets/img/everlasting.jpg
author: Ab Hadley
date: Jul 23
datetime: 2026-07-23
badge: Featured<article class="article-card article-card--stacked">
<a class="article-card__media article-card__media--top" href="#" aria-label="Dark mode ships across every section." style="background-image:url('/assets/img/everlasting.jpg')"></a>
<div class="article-card__body">
<a class="text-decoration-none text-reset" href="#">
<h3 class="h4 mb-2">Dark mode ships across every section.</h3>
<p class="text-body-secondary mb-0">One toggle, no flash, and every surface follows along.</p>
</a>
<div class="article-card__meta">
<hr class="article-card__divider">
<div class="d-flex align-items-center gap-2">
<span class="mk-avatar article-card__avatar d-inline-flex align-items-center justify-content-center fw-semibold" style="background:var(--mk-primary-soft);color:var(--mk-primary)">ME</span>
<span class="small fw-semibold text-uppercase">Mara Ellison</span>
<time class="small text-uppercase text-body-secondary ms-auto" datetime="">Jul 18</time>
</div>
</div>
</div>
</article>layout: stacked
title: Dark mode ships across every section.
excerpt: One toggle, no flash, and every surface follows along.
image: /assets/img/everlasting.jpg
author: Mara Ellison
date: Jul 18| Field | Type | Notes |
|---|---|---|
title |
text required | |
excerpt |
textarea | |
image |
image | |
href |
url | |
badge |
text | e.g. Featured |
layout |
text | horizontal (side-by-side) or stacked (image on top) |
image_position |
text | horizontal only — left or right at md+ |
media_span |
number | horizontal only — image column in Bootstrap cols (1–11); 6 = half, 3 = quarter |
compact |
boolean | horizontal only — shorter card for grids of many stories |
author |
text | |
author_avatar |
image | |
date |
text | Display date, e.g. May 02 |
datetime |
text | ISO, e.g. 2026-05-02 |
A single catalogued work — a real image, or a generated "canvas" field standing in until one is supplied — with a gallery caption.
<figure class="artwork">
<span class="artwork__frame">
<span class="art-canvas art-canvas--3" style="aspect-ratio:4/5" aria-hidden="true"></span>
</span>
<figcaption class="artwork__caption">
<span class="artwork__line">
<span class="artwork__title">Field Notes No. 3</span>
</span>
<span class="artwork__meta">Oil & cold wax on panel · 2025</span>
<span class="artwork__dims">48 × 60 in</span>
</figcaption>
</figure>title: Field Notes No. 3
medium: Oil & cold wax on panel
year: 2025
dims: 48 × 60 in
preset: 3<figure class="artwork">
<span class="artwork__frame">
<span class="art-canvas art-canvas--10 art-canvas--photo" style="aspect-ratio:5/4" aria-hidden="true"></span>
</span>
<figcaption class="artwork__caption">
<span class="artwork__line">
<span class="artwork__title">Coastline, low tide</span>
</span>
<span class="artwork__meta">Archival pigment print · 2024</span>
</figcaption>
</figure>title: Coastline, low tide
medium: Archival pigment print
year: 2024
preset: 10
treatment: photo
ratio: 5/4| Field | Type | Notes |
|---|---|---|
title |
text required | |
medium |
text | e.g. Oil & cold wax on panel |
year |
text | |
dims |
text | e.g. 48 × 60 in |
price |
text | Optional — sits on the title's line, hard right. Include the symbol, e.g. $3,200, or write POA / Sold. |
preset |
text | 1–16 — a generated field stands in until a real image is supplied (1–8 painterly, 9–16 photographic) |
ratio |
text | CSS aspect-ratio, e.g. 4/5, 1/1, 5/4 |
treatment |
text | photo — frames the field as a photograph (vignette). Empty = painterly. |
image |
image | Optional — a real photo replaces the generated canvas |
href |
url | |
class_names |
text |
A photo-essay teaser — an image (or stand-in field) with the title overlaid, the whole card a link. The Journal counterpart to the article card.
<a class="essay-card" href="#">
<span class="art-canvas art-canvas--17 art-canvas--film" style="aspect-ratio:1/1" aria-hidden="true"></span>
<span class="essay-card__scrim" aria-hidden="true"></span>
<span class="essay-card__cap">
<span class="essay-card__title">Slow Mornings</span>
<span class="essay-card__sub">New Orleans</span>
</span>
</a>title: Slow Mornings
subtitle: New Orleans
preset: 17
treatment: film<a class="essay-card" href="#" aria-label="Rooftops">
<span class="art-canvas art-canvas--19 art-canvas--film" style="aspect-ratio:1/1" aria-hidden="true"></span>
</a>title: Rooftops
caption: none
preset: 19| Field | Type | Notes |
|---|---|---|
title |
text required | |
subtitle |
text | venue / place |
href |
url | |
preset |
text | 1–20 field, or supply an image |
ratio |
text | |
treatment |
text | film (warm grade) · photo (vignette) · empty |
caption |
text | none = image only (no overlay text or scrim); the title still names the link for screen readers |
image |
image | |
class_names |
text |
A single feature — icon, heading, and a line of copy; optionally the whole card is a link.
Every page is built from the same pieces the CMS hands an editor.
<div class="mk-feature-card mk-lift-sm mk-shadow-sm mk-highlight h-100 p-4">
<span class="mk-icon-box mb-3">
<i class="bi bi-boxes"></i>
</span>
<h3 class="h5">Composable partials</h3>
<p class="mb-0 text-body-secondary">Every page is built from the same pieces the CMS hands an editor.</p>
</div>title: Composable partials
body: Every page is built from the same pieces the CMS hands an editor.
icon: bi-boxes<a class="mk-feature-card mk-lift-sm mk-shadow-sm mk-highlight h-100 p-4 text-decoration-none text-body d-block" href="#">
<span class="mk-icon-box mb-3">
<i class="bi bi-book"></i>
</span>
<h3 class="h5">Read the guide</h3>
<p class="mb-0 text-body-secondary">The whole card becomes a link when a URL is set.</p>
</a>title: Read the guide
body: The whole card becomes a link when a URL is set.
icon: bi-book
href: #| Field | Type | Notes |
|---|---|---|
title |
text required | |
body |
textarea | |
icon |
text | Bootstrap Icons class, e.g. bi-palette-fill |
href |
url | Makes the whole card a link |
level |
number |
A linked preview tile for a page or template — optional screenshot, badge, and a coming-soon state.
<a class="page-card mk-lift mk-shadow mk-highlight" href="/pages/example-pages/newsroom">
<div class="page-card__thumb">
<span class="page-card__frame-bar">
<i></i>
<i></i>
<i></i>
</span>
<span class="page-card__placeholder">
<i class="bi bi-window"></i>
</span>
</div>
<div class="page-card__body">
<h3 class="page-card__title">Newsroom</h3>
<span class="badge badge-primary">Page</span>
<i class="bi bi-chevron-right page-card__chevron"></i>
</div>
</a>title: Newsroom
href: /pages/example-pages/newsroom
badge: Page<a class="page-card mk-lift mk-shadow mk-highlight is-soon" href="#">
<div class="page-card__thumb">
<span class="page-card__frame-bar">
<i></i>
<i></i>
<i></i>
</span>
<span class="page-card__placeholder">
<i class="bi bi-window"></i>
</span>
</div>
<div class="page-card__body">
<h3 class="page-card__title">Pricing</h3>
<i class="bi bi-chevron-right page-card__chevron"></i>
</div>
</a>title: Pricing
soon: true| Field | Type | Notes |
|---|---|---|
title |
text required | |
href |
url | Route to open when the card is clicked |
image |
image | Thumbnail; a placeholder frame shows until one is set |
badge |
text | e.g. New |
soon |
boolean | Placeholder + link disabled |
A pull-quote with an attributed source and an avatar — or initials when there's no photo.
Our marketing site and our design system became the same thing.
<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">Our marketing site and our design system became the same thing.</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)">NO</span>
<span>
<span class="d-block fw-semibold">Nadia Okonkwo</span>
<span class="d-block small text-body-secondary">Marketing Lead</span>
</span>
</figcaption>
</figure>quote: Our marketing site and our design system became the same thing.
name: Nadia Okonkwo
role: Marketing Lead
initials: NOWhat I preview in the editor is exactly what ships.
<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">What I preview in the editor is exactly what ships.</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)">TB</span>
<span>
<span class="d-block fw-semibold">Theo Brandt</span>
</span>
</figcaption>
</figure>quote: What I preview in the editor is exactly what ships.
name: Theo Brandt| Field | Type | Notes |
|---|---|---|
quote |
textarea required | |
name |
text required | |
role |
text | |
avatar |
image | |
initials |
text | Fallback when there's no avatar, e.g. DG |