# Directives reference

Every directive the Clayo docs renderer supports, with attributes, allowed values, and a live example of each. For the fence and attribute rules, see [Directive syntax](/articles/directive-syntax).

| Directive | Purpose | Attributes |
| --- | --- | --- |
| `callout` | Highlighted aside | `type`: info, warning, tip, danger (default info) |
| `video` | Embedded video player | `src`: video URL (required) |
| `align` | Content alignment | `value`: left, center, right (default left) |
| `tabs` / `tab` | Tabbed content | `tab` takes `label` |
| `accordion` / `item` | Collapsible sections | `item` takes `title` |

## Callout

A highlighted block for asides that deserve attention. The `type` attribute picks the tone: `info` (default), `tip`, `warning`, or `danger`.

```
:::callout{type="warning"}
Changing your subdomain breaks existing links immediately.
:::
```

The four types rendered:

:::callout{type="info"}
Info: neutral context worth knowing.
:::

:::callout{type="tip"}
Tip: a better way to do something.
:::

:::callout{type="warning"}
Warning: proceed with care.
:::

:::callout{type="danger"}
Danger: destructive and irreversible.
:::

## Video

Embeds a responsive video player. The `src` attribute is required and accepts YouTube, Loom, and Vimeo URLs in their common shapes:

- YouTube: watch URLs, youtu.be short links, embed URLs, and Shorts
- Loom: share and embed URLs
- Vimeo: video page and player URLs

```
:::video{src="https://www.loom.com/share/your-video-id"}
:::
```

Paste the URL straight from your browser's address bar; Clayo converts it to the right embed form at render time. A URL from an unsupported provider renders as a clearly labeled unsupported-video block rather than breaking the page. More context in [Embed videos](/articles/video-embeds).

## Align

Aligns its content left, center, or right. Most useful for centering an image or a short closing line.

```
:::align{value="center"}
![Team photo](https://example.com/photo.png)
:::
```

:::align{value="center"}
This line is centered.
:::

## Tabs

A container for content that varies by platform, language, or tool. `tabs` is the four-colon container; each three-colon `tab` takes a `label`.

```
::::tabs

:::tab{label="npm"}
npm install clayo
:::

:::tab{label="pnpm"}
pnpm add clayo
:::

::::
```

Rendered:

::::tabs

:::tab{label="npm"}
Run `npm install clayo`.
:::

:::tab{label="pnpm"}
Run `pnpm add clayo`.
:::

::::

Keep labels short: one or two words. Tab content can hold anything markdown can, including code blocks and callouts.

## Accordion

Collapsible sections, ideal for FAQs and optional detail that would otherwise bloat a page. `accordion` is the four-colon container; each `item` takes a `title`.

```
::::accordion

:::item{title="Can I export my content?"}
Yes. Every article is markdown, and your agent can read all of it.
:::

:::item{title="Is there a free plan?"}
Clayo is free to use. You bring your own OpenAI key for AI answers.
:::

::::
```

Rendered:

::::accordion

:::item{title="Can I export my content?"}
Yes. Every article is markdown, and your agent can read all of it.
:::

:::item{title="Is there a free plan?"}
Clayo is free to use. You bring your own OpenAI key for AI answers.
:::

::::

## Related: image captions

Captions are not a directive, but they fit the same "richer than plain markdown" family. Give an image a title in quotes and it renders as a visible caption under the figure:

```
![Dashboard overview](https://example.com/dash.png "The project dashboard after connecting a tool")
```

Details in [Add images and captions](/articles/images-and-captions).

:::callout{type="tip"}
Your agent can fetch this whole registry programmatically with the `get_directives` tool, so you can just ask for "a tabbed install section" and let it write valid syntax.
:::