---
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/docs-builder/syntax/directives
---

# 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/docs-builder/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/docs-builder/syntax/admonitions) - Callouts and warnings
- [Code blocks](https://docs-v3-preview.elastic.dev/docs-builder/syntax/code) - Syntax-highlighted code
- [Contributors](https://docs-v3-preview.elastic.dev/docs-builder/syntax/contributors) - Team roster grids with avatars
- [CSV include](https://docs-v3-preview.elastic.dev/docs-builder/syntax/csv-include) - Render CSV files as tables
- [Diagrams](https://docs-v3-preview.elastic.dev/docs-builder/syntax/diagrams) - Mermaid diagrams
- [Dropdowns](https://docs-v3-preview.elastic.dev/docs-builder/syntax/dropdowns) - Collapsible content
- [Images](https://docs-v3-preview.elastic.dev/docs-builder/syntax/images) - Enhanced image handling
- [Include](https://docs-v3-preview.elastic.dev/docs-builder/syntax/file_inclusion) - Include content from other files
- [List sub-pages](https://docs-v3-preview.elastic.dev/docs-builder/syntax/list-sub-pages) - List sibling pages in the current section
- [Math](https://docs-v3-preview.elastic.dev/docs-builder/syntax/math) - Mathematical expressions and equations
- [Settings](https://docs-v3-preview.elastic.dev/docs-builder/syntax/automated_settings) - Configuration blocks
- [Stepper](https://docs-v3-preview.elastic.dev/docs-builder/syntax/stepper) - Step-by-step content
- [Tabs](https://docs-v3-preview.elastic.dev/docs-builder/syntax/tabs) - Tabbed content organization
- [Tables](https://docs-v3-preview.elastic.dev/docs-builder/syntax/tables) - Data tables
- [Version blocks](https://docs-v3-preview.elastic.dev/docs-builder/syntax/version-variables) - API version information