Components

Every block available on a page — callouts, cards, steps, tabs, code groups, accordions, frames.

Components are written with colon fences. The rule that matters: an outer container needs more colons than the container inside it. Callouts use three, items use four, groups use five.

Callouts

CODE-GROUP

```markdown Syntax
:::note Optional custom title
Body text, **markdown** and [links](/quickstart/) work here.
:::
```

Note

Neutral context the reader should have before continuing.

Info

Same treatment as a note — use whichever word reads better.

Tip

A shortcut, a better default, or something non-obvious that saves time.

Success

Confirms the reader is in the right state before moving on.

Warning

Something that will bite: a limit, a gotcha, a cost.

Danger

Data loss, credential exposure, or anything irreversible.

Available types: note, info, tip, check, warning, danger. Omit the title to use the default (:::warning alone renders “Warning”). Override the icon with :::note icon="database".

Cards

Cards need one more colon on the group than on each card.

Markdown

:::::cards cols=2
::::card Quickstart icon="rocket" href="/quickstart/"
Connect your first source in five minutes.
::::

::::card Concepts icon="layers" href="/concepts/"
Sources, datasets, mappings, projects.
::::
:::::

With a link

Cards with href become clickable and grow an arrow on hover.

Without a link

Cards without href are plain containers — good for side-by-side comparisons.

cols accepts 1, 2, or 3; every grid collapses to one column on mobile.

Steps

Markdown

:::::steps
::::step Install the agent
Run the installer.
::::

::::step Pair it
Paste the token.
::::
:::::

First step

Numbering is automatic — reordering steps never leaves a stale number behind.

Second step

Steps hold anything: code, tables, even callouts.

Nesting depth

This callout sits inside a step, which is why the step uses four colons and the group uses five.

Third step

The connecting line stops at the last step.

Tabs

Markdown

:::::tabs
::::tab macOS
Instructions for macOS.
::::

::::tab Windows
Instructions for Windows.
::::
:::::

Tabs are for parallel variants of the same instruction — operating systems, languages, deployment targets.

The first tab renders server-side, so content is visible even before JavaScript loads, and remains indexed by search.

SQL
select count(*) from customers;

Code blocks

Add a title after the language. Add lines for line numbers.

Markdown

```sql Monthly revenue lines
select date_trunc('month', created_at) as month,
       sum(total) as revenue
from orders
group by 1;
```

Monthly revenue lines
select date_trunc('month', created_at) as month,
       sum(total) as revenue
from orders
where status = 'paid'
group by 1
order by 1 desc;

Every block gets a copy button. Inline code looks like chartizer-agent status.

Code groups

Wrap consecutive blocks to get language tabs:

Markdown

::::code-group
```bash psql
psql "$DATABASE_URL" -c "select 1"
```

```js Node
await client.query("select 1");
```
::::

psql
psql "$DATABASE_URL" -c "select count(*) from orders;"

Node
const res = await client.query("select count(*) from orders");

Python

cursor.execute("select count(*) from orders")

The tab label is the block’s title, falling back to the language name.

Accordions

Markdown

::::accordion Connection timed out
The database is not reachable. Check the firewall.
::::

Closed by default

Good for troubleshooting lists, where the reader only needs the one entry that matches their error.

open Open by default

Add open to the opening line.

Video

A video block reserves a 16:9 slot. With no src or embed it renders a placeholder, so you can lay a page out before the video exists.

Markdown

::::video Chartizer in three minutes
Optional caption, in markdown.
::::

::::video src="/videos/tour.mp4" poster="/images/tour-poster.png" Product tour
::::

::::video embed="https://www.youtube.com/embed/VIDEO_ID" Product tour
::::

Chartizer in three minutes: connect a source, map it, chart itVideo coming soon

The caption sits under the frame and accepts markdown.

Attribute	Effect
(none)	Placeholder with the title as its label
`src`	Self-hosted file — put it in `public/videos/`
`poster`	Still shown before a self-hosted video plays
`embed`	Iframe URL — YouTube, Vimeo, Loom
`ratio`	Aspect ratio, default `16 / 9`

An embed is an external request

src keeps everything on your own domain. embed pulls the player from a third party, which means their cookies and their availability.

Images and frames

Markdown
![Alt text](/images/example.png)

::::frame Optional caption
![Alt text](/images/example.png)
::::

Images are lazy-loaded and open full-size in a lightbox on click. frame adds the bordered container and caption used for screenshots.

Tables

Markdown

| Field | Required | Notes |
| --- | --- | --- |
| Host | yes | Hostname or IP |

Field	Required	Notes
Host	yes	Hostname or IP
Port	yes	Defaults to `5432`
User	yes	Use a read-only role

Wide tables scroll horizontally inside their own container rather than stretching the page.

Everything else

Standard Markdown works as expected: bold, italic, code, ~~strikethrough~~, blockquotes, ordered and unordered lists, --- rules, and footnote-free links.

A blockquote, for quoting something rather than for emphasis. Use callouts for emphasis.

Headings from ## to ### are collected into the right-hand table of contents automatically, and each gets a hover anchor for deep links.