Blocs de page et gabarits

Règle du responsable

Un gabarit par page (page-templates).

Budget de taille

125.7 kB gzip pour tout le domaine ; il ne fait que baisser.

Entrées

38 entrées, dont 31 utilisées par des produits et sites en production.

• Action barBêtaA 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 fichiers l'importent
• Argument cardBêtaA 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 fichiers l'importent
• Call-to-action panelBêtaThe 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 fichiers l'importent
• Card gridBêtaA 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 fichiers l'importent
• Catalogue pageBêtaA 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 fichiers l'importent
• Changelog pageBêtaWhat 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 fichiers l'importent
• Code blockBêtaA 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 fichiers l'importent
• Comparison tableBêtaA 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 fichiers l'importent
• Contact pageBêtaReaching the team: the public channels as cards beside the form, then what happens after sending.
• Cover heroBêtaThe 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 listBêtaThe 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 fichiers l'importent
• Docs article pageBêtaA documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.3 fichiers l'importent
• Docs hub pageBêtaThe 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 fichiers l'importent
• Docs layoutBêtaA 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 navBêtaThe 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 fichiers l'importent
• Entity headerBêtaThe 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 noticeBêtaA 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 fichiers l'importent
• Error pageBêtaWhen 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 fichiers l'importent
• GlossaryBêtaA page or panel listing terms and definitions from the host's catalogue.1 fichiers l'importent
• Glossary termBêtaAn underlined host-defined term with a keyboard-accessible definition tooltip.1 fichiers l'importent
• Glow cardBêtaA 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 fichiers l'importent
• How-it-works pageBêtaHow 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 explainedBêtaA figure with its meaning, formula, source, freshness and host-defined thresholds.1 fichiers l'importent
• Landing pageBêtaA 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 fichiers l'importent
• Legal pageBêtaA 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 fichiers l'importent
• Link cardBêtaAn 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 fichiers l'importent
• Longform pageBêtaA long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.
• Marketing layoutBêtaA 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.
• MarqueeBêtaA 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 fichiers l'importent
• Number tickerBêtaA 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 fichiers l'importent
• PageBêtaThe 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 fichiers l'importent
• Page heroBêtaThe 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 fichiers l'importent
• Page indexBêtaA 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 fichiers l'importent
• Section backdropBêtaThe backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.2 fichiers l'importent
• Stage bannerBêtaThe 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 fichiers l'importent
• Step showcaseBêtaA 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 fichiers l'importent
• Table of contentsBêtaThe 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 fichiers l'importent
• WallBêtaA 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 fichiers l'importent