Components

Components are the pieces pages use inside their content: a callout, a code tab, an endpoint, a file tree. Each page below shows the Markdown you write, every option it reads, and a live example.

The engine turns a directive into the component whose folder has the same name under components/. A container directive (:::name … :::) wraps a Markdown body; a leaf directive (::name) stands alone on its own line. Directive attributes are the component's options: :::callout{type=warning}.

Component	Use it for
Badge	A short status label, such as a version or a beta marker.
Callout	A note, tip, important point, warning, or caution.
Cards	A responsive grid of linked cards, used by the home layout.
Changelog entry	One release with a version, a date, and categories.
Code	Code highlighted at build time, with a copy button when JavaScript runs.
Code tabs	The same example in several languages or package managers, as tabs.
Details	A native disclosure that the reader can open and close.
Diff block	Added, removed, and context lines, with a copy of the new file.
Drift banner	A warning above a page whose documentation has drifted from the code.
Embed	A video or another page in a lazy iframe.
Endpoint	An HTTP method, path, parameters, and body for API reference pages.
Figure	An image with alt text, a caption, and a credit, in light and dark.
File tree	A folder structure with a note per entry.
Heading anchor	A link icon on every h2 to h4, added automatically.
Kbd	A keyboard key or key combination.
Key-value list	Properties, options, or metadata as a two-column list of keys and values.
Link card	One link that reads as a card, for next steps and related pages.
Mermaid	A Mermaid diagram rendered to inline SVG at build time, with its source kept.
OS tabs	Install instructions grouped by operating system, defaulting to the reader's system.
Output block	The result of a command, apart from the command above it.
Page status	An experimental, beta, or deprecated banner from front matter.
Reading time	A chip under the title with the page's reading time and word count.
Schema table	A JSON Schema from _data as a table of properties.
Status banner	A page-level deprecated, experimental, or old-version banner, with a replacement link.
Steps	A numbered sequence or tutorial.
Symbol popover	A symbol whose signature and reference page appear on hover or focus.
Table	Markdown tables in a labelled, keyboard-scrollable region.
Tabs	Any sections as tabs, following one chosen label across the page and later pages.
Tags	A wrapping list of tag chips, as links or plain text.
Terminal	A shell session with commands and their output.
Tested chip	The pass or fail result of a page's examples, next to a code block.
Trust panel	A chip under the title that opens the page's trust level, examples, drift, reviewer, and actions.
Variables form	Inputs that fill a page's code-example variables with the reader's own values.
Version badge	A version badge that says when a feature was added, changed, or removed.
Version diff	A section-by-section comparison of two versions, with a text label for every change.
Video	A click-to-load video with a poster and a link that works without JavaScript.