How directives work

Directives extend Markdown with additional features:

:::{note}
This is a callout box that stands out from regular text.
:::
		

How directive syntax works:

• ::: opens and closes the directive block
• {note} is the directive type (always in curly braces)
• Content inside is regular Markdown

:::{image} screenshot.png
:alt: Dashboard overview
:width: 600px
:::
		

1. Options start with : and appear after the opening line.

:::{include} shared-content.md
:::
		

The argument comes right after the directive name.

To nest directives, add more colons to the outer directive:

::::{note}
Outer content

:::{hint}
Inner content
:::

More outer content
::::
		

Use four colons (::::) for the outer directive and three (:::) for the inner one. Need to nest deeper? Keep adding colons.

Code blocks and applies_to blocks use backticks instead of colons to prevent content from being processed as Markdown:

```js
const x = 1;
```
		

The following directives are available:

• Admonitions - Callouts and warnings
• Code blocks - Syntax-highlighted code
• Contributors - Team roster grids with avatars
• CSV include - Render CSV files as tables
• Diagrams - Mermaid diagrams
• Dropdowns - Collapsible content
• Images - Enhanced image handling
• Include - Include content from other files
• List sub-pages - List sibling pages in the current section
• Math - Mathematical expressions and equations
• Page cards - Full-width clickable navigation rows
• Related learning - Catalog links to training and other learning destinations
• Settings - Configuration blocks
• Storybook - Embedded Storybook stories
• Stepper - Step-by-step content
• Tabs - Tabbed content organization
• Tables - Data tables
• Version blocks - API version information
• Vector sizing calculator - Interactive dense_vector sizing estimates

Use {schema-tree} to render an unordered Markdown list as an expandable field tree. The optional argument is its accessible label. The first paragraph of each list item is the field label; following blocks describe it. Direct nested lists define child fields. Lists inside description containers, such as notes, keep their normal Markdown meaning. Inline Markdown is preserved. A useful convention is field name — type — nullability. The first code span identifies the field name and the second identifies its type for styling. Typography and colors come from the documentation theme's shared tokens. It does not interpret a schema language or assign meaning to the label text.

Branches start expanded and use native disclosures, so keyboard and mouse interaction work without JavaScript. Search and Markdown export retain the underlying list.

:::{schema-tree} Range values

* `value` — `List` — nullable

  Metadata: `elastic:type = date_range`

  * `$data$` — `Struct` — non-null
    * `from` — `Timestamp[ms]` — nullable
    * `to` — `Timestamp[ms]` — nullable

:::