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 |
| chart | Horizontal bar chart |
| progress | Progress bar or stepped meter |
| sparkline | Inline trend line drawn from a series |
| trend | Trend indicator: latest value and its change |
| stats | KPI tiles: a label, the number, and its change |
| steps | Numbered steps, or a tracker of where something has got to |
| timeline | The same walk with dots instead of numbers |
| rating | A star rating, as one score or a breakdown |
| 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, stats, rating |
| padding | Bare keyword | compact, spacious | callout, highlight, stats |
| color | color=<color> | Hex, named, rgb(), or hsl() color | callout, highlight, centered, header, footer, and every data directive |
| bg | bg=<color> | Hex, named, rgb(), or hsl() color | callout, highlight, stats |
| border-radius | border-radius=<value> | Any CSS length (e.g. 16px, 0) | callout, highlight, chart, progress, sparkline, stats |
The data directives — chart, progress, sparkline, stats, steps, and rating — all take color for the drawn part, and each has its own parameters for the scale, the size, and the ground behind the drawing. See their pages.
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.