Page blocks & templates

Owner rule

One template per page (page-templates).

Size budget

125.7 kB gzip for the whole domain; it only goes down.

Entries

38 entries, 31 used by live products and sites.

• Action barBetaA row of link actions — discuss, propose, report, read the docs, see the code: buttons with their words at the end of a page, or icon buttons whose words are a tooltip at the foot of a card.3 files import it
• Argument cardBetaA compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.3 files import it
• Call-to-action panelBetaThe invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.2 files import it
• Card gridBetaA responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.14 files import it
• Catalogue pageBetaA catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.1 files import it
• Changelog pageBetaWhat changed and why: each entry with its date and version sticking beside it, its changes by kind in words and colour, its reasons under it.8 files import it
• Code blockBetaA code sample: its language and file name, the code highlighted by TanStack Highlight on the tokens (TS, TSX, JS, JSON, YAML, Bash, HTML, CSS, Java, Kotlin, diff — it scrolls sideways, never shrinks), numbered lines, lines set apart (highlighted, added, removed, in focus) and a copy button that says it copied — CodeTabs puts several build tools side by side.19 files import it
• Comparison tableBetaA fair “versus” block: one grid where every row lines up across the columns, your column drawn as a highlighted band of the same grid (the brand's tint and light, its header part of it), a small icon per question, each answer as a bold key phrase then its detail; the other answers stay neutral. On a phone, one card per question with the answers stacked.2 files import it
• Contact pageBetaReaching the team: the public channels as cards beside the form, then what happens after sending.
• Cover heroBetaThe first screen of a shop or a place: its cover — a photo, or a muted loop that stays a still under reduced motion — behind the name, a one-line promise, a few true facts and the main action. Without a cover, the brand's colours.
• Decision listBetaThe decisions behind a product, numbered: what was chosen, large, then side by side what was refused, why, and what it costs the reader — each with its mark and its colour.1 files import it
• Docs article pageBetaA documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.3 files import it
• Docs hub pageBetaThe entry of a documentation: the search in the middle of the hero, the collections each in its product's brand with their quick links, quick starts beside the most read pages, what is new, the owl's promise.2 files import it
• Docs layoutBetaA documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.
• Docs navBetaThe pages of a documentation in quiet groups: each group folds, the one holding the current page is open, only the current page is marked.2 files import it
• Entity headerBetaThe head of an entity (a collection, a shop, a studio): its picture, its name and description edited where they are read, its tags, and a refusal said with the product's own words.
• Environment noticeBetaA thin band above the app bar that says this deployment is a development version — its data can be reset and it is not a commercial offer — driven by the deployment's stage: it renders nothing in production.4 files import it
• Error pageBetaWhen a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.5 files import it
• GlossaryBetaA page or panel listing terms and definitions from the host's catalogue.1 files import it
• Glossary termBetaAn underlined host-defined term with a keyboard-accessible definition tooltip.1 files import it
• Glow cardBetaA card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).4 files import it
• How-it-works pageBetaHow a product works, told in steps along a numbered line — each step its words beside its visual, the sides alternating on a wide screen.
• KPI explainedBetaA figure with its meaning, formula, source, freshness and host-defined thresholds.1 files import it
• Landing pageBetaA landing page: the promise beside the product alive in a window, a band of proofs, the features as a bento where the main one takes the room, the closing call.6 files import it
• Legal pageBetaA policy or terms: the date in force, the short version in plain words, the sections in a narrow column with their contents beside them.1 files import it
• Link cardBetaAn entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.11 files import it
• Longform pageBetaA long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.
• Marketing layoutBetaA site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.
• MarqueeBetaA band of items that slides forever — at a speed in pixels per second, paused by the pointer, the focus or its own pause button, read once by assistive technology, and a still row you scroll under reduced motion.1 files import it
• Number tickerBetaA figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.12 files import it
• PageBetaThe frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks, and the papers (ruled, lines, dot-grid, kraft).52 files import it
• Page heroBetaThe first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.30 files import it
• Page indexBetaA book's index for a documentation or a catalogue: groups, entries, a dotted leader and the page number at the end of the line; the current entry marked in the margin.1 files import it
• Section backdropBetaThe backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.2 files import it
• Stage bannerBetaThe announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.1 files import it
• Step showcaseBetaA product's guided tour in one device frame — phone, browser or macOS window: the steps beside it, each real recording played muted then the next, crossfading; it plays only in view, holds on hover and focus, and keeps a pause button.2 files import it
• Table of contentsBetaThe sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.4 files import it
• WallBetaA read-only wall of photos, short notes and the owner's sign: Montréal brick, Moroccan eight-point zellige, Grenoble ridgelines or warm plaster, over a real keyboard-reachable list.1 files import it