Composed from elements — the button, cards, quotes, search, the theme toggle. Pick a group to see every variation live, driven by the demo data in each partial's frontmatter.
The button. .mk-btn alone is finished — a neutral outline drawn in ink, so it is right on a light page, a dark page, and inside a dark band without being told. Variants add emphasis; none of them rescue it.
Two or more buttons that belong together. The base sets them side by side with a gap — the arrangement pages actually need. join collapses the gap so they read as one piece — the look a segmented control is drawn with, asked for rather than defaulted.
A heading, level 1–6. The level is the DOCUMENT's outline; size comes from a display or .h* class, so a page can look right and still be structured right.
An image. Lazy and async by default, so a page of them costs one render; sizing and shape are classes, not fields.
A paragraph. Takes rich text from the CMS, so a class is how you set its role — lead for an intro, text-body-secondary for support.
Stacked sections that open one at a time. This one wears the engine's own classes — accordion and its parts — because Bootstrap's accordion is already right: the toggle is a real button, its state lives in aria-expanded, and the panel is the thing the button points at. There was nothing to correct.
Article card · Artwork · Essay card · Feature card · Page card · Testimonial
A full-height band of cards you swipe through, where the card nearest the centre is the one in focus — its neighbours sit back, smaller and dimmer. The track is endless by default: past the last card comes the first again. It is the same scroll-snap mechanism as the rail, so touch, keyboard and no-JS all still work; the focus is a scroll-driven animation layered over it, and browsers without that support simply get the rail.
Slides, one at a time. The mechanism is the engine's — carousel and its parts, untouched — but the default SHAPE is Mark's: still until asked to move, steerable without homework, and named to the platform when you name it. The bare default is the mechanism plus the way to drive it — arrows. Motion, indicators, captions and crossfade are all things you ask for. Bootstrap ships the reverse (auto-advancing, controls opt-in), which is motion nobody asked for and navigation everyone re-types.
The Stacki colour picker as a system component — saturation/brightness square, hue (and optional opacity) tracks, hex and RGB/HSL channel fields, and the eyedropper where the browser has one. Ported from the owner's flowtricks/stacki; metrics and drag behaviour are the original's, the skin reads system tokens. Emits mk-color on its root whenever the colour changes, and the root exposes mkSetColor(hex) for programmatic control — the picker knows nothing about what the colour is FOR.
The plain card — a picture on top, words underneath. Bootstrap's card, adopted rather than replaced, with one addition that matters for a CMS: no image yields the brand placeholder instead of a gap, so an unfilled record still reads as deliberate.
A card where the whole card is the link and the image IS the card and the words ride on it, on a scrim that guarantees the contrast whatever the page theme is. Extracted from the card carousel, which is now one of its callers rather than its owner: the card and the swiping are separate ideas, and only one of them was reusable. In a plain row the copy stays visible; inside a carousel the body collapses to a reveal that opens on hover, because there the neighbouring cards need the room.
Several items at a time, swiped or scrolled — the sliding case the carousel cannot do. The mechanism is the platform's: a scroll container with snap points, so touch momentum, keyboard scrolling and no-JS all come free. Arrows are an enhancement that appears only when there is somewhere to go. Reach for the carousel when one full slide at a time is the point; reach for this when the next item should peek.
A control that changes how many columns a row divides into — 2, 3 or 4 — for the reader rather than the author. The same joined dropdown the mode control uses, because it is the same kind of thing — a small exclusive choice about how the page is presented.
A search field — a leading icon, an input, and a submit — for a navbar, hero, or docs rail. Optionally a floating mk-shadow card.
A line of figures — the value carrying the accent and the weight, the label staying quiet under it. Marked up as a description list, because a stat is a name and a value. It is only the row: no band, no container, no padding, which is what makes it composable and why it lives here rather than inside the Stats band pattern.
The color-mode control — one source of truth. pill and link toggle between two modes; menu is a split button whose left half toggles and whose right half opens the full list, which is what lets a third mode exist at all.