# Content blocks

> The component library available in every rich text surface, including callouts, steps, tabs, accordions, tiles and fields.

Rich text in Blueprintr is markdown plus a component library. The same
components work in a blueprint's Rich Text tabs, in a stratum's Rich tab, and
on every folium page, including this one.

Every component is written as a blockquote whose first line is a marker.
That format survives the visual editor, and degrades to a readable quote in
any plain markdown renderer.

## Callouts

```markdown
> [!NOTE]
> Ordinary supporting detail.
```

Available kinds: `NOTE`, `TIP`, `IMPORTANT`, `INFO`, `FAQ`, `TLDR`, `QUOTE`.

> [!TIP]
> A callout can link to a stratum: `> [!NOTE|stratum:abc123] Title`.

## Procedures

```markdown
> [!STEPS]
>
> === Install the CLI
>
> Run the installer.
>
> === Authenticate
>
> Then sign in.
```

Steps are numbered automatically. A plain ordered list inside `[!STEPS]` works
too.

## Panels and grids

`=== Label` on its own line separates panels in every multi-panel component.

| Marker | Renders |
| --- | --- |
| `[!TABS]` | Tabbed panels |
| `[!CODETABS]` | Tabbed code blocks, one fence per panel |
| `[!ACCORDIONS]` | Collapsible `<details>`, no JavaScript |
| `[!COLUMNS n]` | An n-column responsive grid |
| `[!TILES n]` | A tile grid, for navigation |
| `[!CARDS]` | A card grid built from a markdown list |
| `[!PANEL] Title` | An aside |

## API and reference

```markdown
> [!FIELDS]
>
> > [!FIELD userId|string|required]
> >
> > The caller's user id.
>
> > [!RESPONSE createdAt|datetime]
> >
> > When the record was written.
```

## Inline pieces

| Marker | Renders |
| --- | --- |
| `[!BADGE green] Stable` | A small label. Colours: gray, blue, green, amber, red, purple, teal, pink |
| `[!ICON rocket] Ship it` | A Lucide glyph, optionally labelled |
| `[!TOOLTIP hint text]` | A term with a hover and focus hint |
| `[!BANNER warning]` | A page-level banner. Types: info, warning, success, error |
| `[!TREE]` | A file tree, from a nested markdown list |
| `[!UPDATE v2.1.0\|2026-09-05]` | A dated changelog entry |
| `[!FRAME]` | A decorative frame |
| `[!DETAILS] Summary` | One collapsible block. `[!DETAILS\|open]` starts expanded |

## Audience splitting

```markdown
> [!VISIBILITY agents]
>
> Notes for an AI agent reading this page.
```

Content marked `agents` is removed before the HTML reaches a human reader, and
content marked `humans` is removed for an agent. Use it for machine-readable
hints you do not want on the page.

> [!IMPORTANT]
> A malformed marker degrades to an ordinary blockquote rather than being
> dropped. If a component renders as a plain quote, the marker line is wrong.

## Embeds

| Syntax | Embeds |
| --- | --- |
| `![diagram:vellum](url)` | A diagram from an uploaded source |
| `![blueprint:handle/slug](embed-url)` | Another blueprint |
| `![video](url)` | A video |

Diagram embeds can be resized by dragging their corners; the size is written
back into the markdown.