---
title: How directives work
description: Directives extend Markdown with additional features: How directive syntax works: ::: opens and closes the directive block, {note} is the directive type...
url: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/directives
products:
  - Elastic Docs Builder
---

# How directives work
Directives extend Markdown with additional features:
```markdown
:::{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


## Adding options

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


## Adding arguments

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

The argument comes right after the directive name.

## Nesting directives

To nest directives, add more colons to the outer directive:
```markdown
::::{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.

## Exception: Literal blocks

Code blocks and [`applies_to` blocks](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/applies) use backticks instead of colons to prevent content from being processed as Markdown:
```markdown
```js
const x = 1;
```
```


## Available directives

The following directives are available:
- [Admonitions](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/admonitions) - Callouts and warnings
- [Code blocks](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/code) - Syntax-highlighted code
- [Contributors](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/contributors) - Team roster grids with avatars
- [CSV include](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/csv-include) - Render CSV files as tables
- [Diagrams](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/diagrams) - Mermaid diagrams
- [Dropdowns](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/dropdowns) - Collapsible content
- [Images](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/images) - Enhanced image handling
- [Include](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/file_inclusion) - Include content from other files
- [List sub-pages](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/list-sub-pages) - List sibling pages in the current section
- [Math](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/math) - Mathematical expressions and equations
- [Page cards](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/page-card) - Full-width clickable navigation rows
- [Related learning](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/related-learning) - Catalog links to training and other learning destinations
- [Settings](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/automated_settings) - Configuration blocks
- [Storybook](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/storybook) - Embedded Storybook stories
- [Stepper](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/stepper) - Step-by-step content
- [Tabs](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/tabs) - Tabbed content organization
- [Tables](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/tables) - Data tables
- [Version blocks](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/version-variables) - API version information
- [Vector sizing calculator](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4844/syntax/vector-sizing-calculator) - Interactive dense_vector sizing estimates


## Schema trees

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.
```markdown
:::{schema-tree} Range values

* `value` — `List` — nullable

  Metadata: `elastic:type = date_range`

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

:::
```

<schema-tree>
  - `value` — `List` — nullable
    Metadata: `elastic:type = date_range`
    - `$data$` — `Struct` — non-null
      - `from` — `Timestamp[ms]` — nullable
      - `to` — `Timestamp[ms]` — nullable
</schema-tree>