A row of short claims, each an icon, a title and a sentence. The column count is a field rather than a variant because the right number is decided by how many claims you have, not by which design you picked.
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 — three claims, which is as many as most readers will hold.
Why this theme
Partials with declared fields, so the same block renders in the theme and in the CMS.
Every block declares its fields; pages compose them rather than repeating markup.
One token layer, both schemes, and no flash of the wrong one on load.
A stylesheet and a script — drop it on a page and start composing.
<section class="mk-section">
<div class="mk-container">
<div class="mk-title-block">
<p class="mk-eyebrow text-uppercase fw-semibold mb-2">Why this theme</p>
<h2 class="mb-2">Built the way a site is actually built.</h2>
<p class="lead text-body-secondary mb-0">Partials with declared fields, so the same block renders in the theme and in the CMS.</p>
</div>
<div class="mk-row mk-row--3up">
<div>
<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 block declares its fields; pages compose them rather than repeating markup.</p>
</div>
</div>
<div>
<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-circle-half"></i>
</span>
<h3 class="h5">Light and dark</h3>
<p class="mb-0 text-body-secondary">One token layer, both schemes, and no flash of the wrong one on load.</p>
</div>
</div>
<div>
<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-plug"></i>
</span>
<h3 class="h5">No build to adopt</h3>
<p class="mb-0 text-body-secondary">A stylesheet and a script — drop it on a page and start composing.</p>
</div>
</div>
</div>
</div>
</section>eyebrow: Why this theme
title: Built the way a site is actually built.
intro: Partials with declared fields, so the same block renders in the theme and in the CMS.
items: [3 items]Four narrower cards, on a tone so the row separates from the sections either side.
Colour, type and spacing as variables, not hard-coded values.
Wraps that own the container so blocks do not have to.
Script loads only where the markup that needs it exists.
Focus rings, reduced motion and keyboard paths in the defaults.
<section class="mk-section surface-muted">
<div class="mk-container">
<div class="mk-title-block">
<h2 class="mb-2">What you get</h2>
</div>
<div class="mk-row mk-row--4up">
<div>
<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-palette"></i>
</span>
<h3 class="h5">Tokens</h3>
<p class="mb-0 text-body-secondary">Colour, type and spacing as variables, not hard-coded values.</p>
</div>
</div>
<div>
<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-grid-1x2"></i>
</span>
<h3 class="h5">Layout</h3>
<p class="mb-0 text-body-secondary">Wraps that own the container so blocks do not have to.</p>
</div>
</div>
<div>
<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-lightning-charge"></i>
</span>
<h3 class="h5">Islands</h3>
<p class="mb-0 text-body-secondary">Script loads only where the markup that needs it exists.</p>
</div>
</div>
<div>
<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-universal-access"></i>
</span>
<h3 class="h5">Accessible</h3>
<p class="mb-0 text-body-secondary">Focus rings, reduced motion and keyboard paths in the defaults.</p>
</div>
</div>
</div>
</div>
</section>column_count: 4
surface: muted
title: What you get
items: [4 items]With href, each card becomes a target — the whole card, not just the title.
<section class="mk-section">
<div class="mk-container">
<div class="mk-title-block">
<h2 class="mb-2">Where to start</h2>
</div>
<div class="mk-row mk-row--2up">
<div>
<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 docs</h3>
<p class="mb-0 text-body-secondary">Every component, every variation, rendered from its own demo data.</p>
</a>
</div>
<div>
<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-easel"></i>
</span>
<h3 class="h5">See the examples</h3>
<p class="mb-0 text-body-secondary">Complete sites built from nothing but these partials.</p>
</a>
</div>
</div>
</div>
</section>column_count: 2
title: Where to start
items: [2 items]| Field | Type | Notes |
|---|---|---|
eyebrow |
text | |
title |
text | |
intro |
textarea | |
column_count |
number | Cards per row at lg (2, 3, or 4) — two at tablet, one on phones |
padding |
text | Vertical rhythm. `mk-section` for the section rhythm; the default assumes a band above already supplied the space over the header |
surface |
text | empty (page), muted, subtle, primary, or dark |
container |
text | |
id |
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 |