Directives
Special block-level content sections for email layout.
Directives are special block-level sections that control the email layout. They use the ::: fenced container syntax:
::: directive
Content goes here
:::Available Directives
| Directive | Description |
|---|---|
| header | Content above the main body (logos, brand images) |
| hero | Full-width section with background image |
| columns | Multi-column layouts that stack on mobile |
| callout | Highlighted tip or note |
| highlight | Emphasized content block |
| centered | Center-aligned text |
| spacer | Explicit vertical whitespace |
| divider | Styled horizontal rule |
| social | Social link icon row |
| accordion | Collapsible FAQ panels |
| footer | Footer with links and legal text |
The spacer and divider directives are single-line: they take no content and need no closing :::.
There is also a single-line include directive that splices in reusable markdown partials supplied by the rendering app.
Parameters
Some directives accept space-separated parameters after the directive name to customize alignment, padding, and colors:
::: callout center
Centered callout content
:::
::: highlight center compact bg=#dc2626
Compact, centered highlight with custom background
:::| Parameter | Syntax | Values | Applies To |
|---|---|---|---|
| align | Bare keyword | center, left, right | callout, highlight, header, footer |
| padding | Bare keyword | compact, spacious | callout, highlight |
| color | color=<color> | Hex, named, rgb(), or hsl() color | callout, highlight, centered, header, footer |
| bg | bg=<color> | Hex, named, rgb(), or hsl() color | callout, highlight |
| border-radius | border-radius=<value> | Any CSS length (e.g. 16px, 0) | callout, highlight |
Parameter values are validated: an unrecognized color, alignment, or length falls back to the theme default and surfaces a render warning rather than breaking the email. Template tags like {{brand_color}} are passed through for your sending app to resolve.
See each directive's page for detailed examples.