Component reference#

Every component below is available in any MarkUP document. Plugins can add more.

Callouts#

note#

Note callout — useful information that readers should know, even when skimming.

Syntax: :::note

Label (optional): Custom title. Defaults to “Note”.

:::note
The body is regular **MarkUP**.
:::

tip#

Tip callout — helpful advice for doing things better or more easily.

Syntax: :::tip

Label (optional): Custom title. Defaults to “Tip”.

:::tip
The body is regular **MarkUP**.
:::

important#

Important callout — key information readers need to achieve their goal.

Syntax: :::important

Label (optional): Custom title. Defaults to “Important”.

:::important
The body is regular **MarkUP**.
:::

warning#

Warning callout — urgent information that needs immediate attention to avoid problems.

Syntax: :::warning

Label (optional): Custom title. Defaults to “Warning”.

:::warning
The body is regular **MarkUP**.
:::

caution#

Caution callout — advises about risks or negative outcomes of certain actions.

Syntax: :::caution

Label (optional): Custom title. Defaults to “Caution”.

:::caution
The body is regular **MarkUP**.
:::

Layout#

card#

A bordered surface that groups related content. Several cards in a row inside columns make a grid.

Syntax: :::card

Label (optional): Card title.

:::card[Installation]{href=installation.md}
MarkUP needs Node.js 22.12 or newer.
:::

columns#

Lays out its column children side by side. Columns stack on narrow screens.

Syntax: :::columns

May only contain column.

::::columns
:::column
Left
:::
:::column
Right
:::
::::

column#

One column of a columns layout.

Syntax: :::column

Must be placed directly inside columns.

tabs#

A set of tabbed panels. Each panel is a tab child; works without JavaScript.

Syntax: :::tabs

May only contain tab.

::::tabs
:::tab[Command]
```sh
markup build docs --out site
```
:::
:::tab[Configuration]
```json
{ "out": "site" }
```
:::
::::

markup build docs --out site

{ "out": "site" }

tab#

One panel of a tabs group. The label is the tab title.

Syntax: :::tab

Label (required): Tab title.

Must be placed directly inside tabs.

Content#

details#

A collapsible section. The label is the always-visible summary.

Syntax: :::details

Label (optional): Summary text. Defaults to “Details”.

:::details[How does it work?]
The body is hidden until the reader expands it.
:::

figure#

Self-contained content — usually an image, diagram or code — with an optional caption.

Syntax: :::figure

Label (optional): Caption.

:::figure[Building a folder]
```sh
markup build docs --out site
```
:::

markup build docs --out site

progress#

A progress bar. Use it as a block (::progress) or inline (:progress).

Syntax: ::progress, :progress

Label (optional): Text shown next to the bar.

::progress[Translation]{value=72}

Data#

chart#

A chart rendered to static SVG. The body is MarkUP Data: either data (one series of label: value pairs) or labels plus series.

Syntax: :::chart · body: MarkUP Data

Label (optional): Chart title (same as the title key).

Single series

:::chart
type: bar
title: Favourite languages
data:
  Python: 80
  JavaScript: 60
  Rust: 40
:::

Several series

:::chart{type=line unit=k}
labels: [Q1, Q2, Q3, Q4]
series:
  - name: 2025
    values: [12, 18, 15, 24]
  - name: 2026
    values: [16, 22, 27, 31]
:::

Pie chart

:::chart{type=pie}
title: Time spent
data:
  Writing: 50
  Review: 30
  Meetings: 20
:::

Navigation#

toc#

A table of contents generated from the document’s headings.

Syntax: ::toc

Label (optional): Title shown above the list.

::toc[On this page]{depth=3}

Inline#

badge#

A small status label.

Syntax: :badge

Label (required): Badge text.

Status: :badge[stable]{variant=success}

kbd#

A keyboard shortcut. Keys separated by + are rendered individually.

Syntax: :kbd

Label (required): Keys, e.g. Ctrl+Shift+P.

Press :kbd[Ctrl+S] to save.

abbr#

An abbreviation with its expansion shown on hover.

Syntax: :abbr

Label (required): The abbreviation.

:abbr[AST]{title="Abstract syntax tree"}

u#

Underlined text. Markdown has no underline syntax, so it is a component. The label can contain other formatting, e.g. :u[**bold**].

Syntax: :u

Label (required): The text to underline.

Sign the form :u[before] Friday.