Directives

Directives use :::name ... ::: syntax to mark semantic regions of your template (similar to fenced code blocks in Markdown). Each directive compiles to the appropriate structure for each channel.

Norq has 16 directives: 12 content directives, 3 control flow directives, and :::table for iterable data tables.

Directive parameters

Content directives accept optional parameters after the name. These affect email rendering (other channels ignore them). Parameters are space-separated — order doesn't matter. Expressions like {{var}} are supported.

All content directives (header, footer, callout, highlight, fields, centered, hero) support all parameters. Expressions like {{variable}} are resolved in params.

Examples:

::: header center bg=#1e3a5f color=#ffffff
White text on dark header
:::
 
::: callout bg=#fff3cd color=#856d0e
Warning-styled callout
:::
 
::: footer right color=#999999
[Unsubscribe]({{unsubscribe_url}})
:::
 
::: hero {{hero_image_url}}
# Dynamic background image
:::

Content directives

:::header

Top section of the notification -- logos, brand name, title.

::: header
Order Shipped
:::

:::footer

Bottom section -- legal text, unsubscribe links, context.

::: footer
[Unsubscribe]({{unsubscribe_url}})
:::

:::table

Iterable data table — combines table rendering with array iteration. Header row renders once, template row repeats per item. Supports variable pipe arguments in cells.

::: table products as item
| Product | Qty | Subtotal |
|---------|-----|----------|
| {{item.name}} | {{item.qty}} | {{item.cost | multiply item.qty | currency "USD"}} |
:::

If the collection is empty, only the header row renders (empty table). The | inside {{ }} expressions is handled correctly — it won't break column separation.

:::action

CTA buttons. Contains Markdown links with style hints.

::: action
[Track Order]({{tracking_url}}){primary}
[Cancel Order]({{cancel_url}}){danger}
[View Details]({{details_url}}){secondary}
:::

Button styles: {primary}, {secondary}, {danger}.

:::callout

Highlighted note or warning box.

::: callout
Your payment method will be charged within 24 hours.
:::

:::hero

Full-width hero image.

::: hero
![Hero banner](https://cdn.example.com/hero.png)
:::

:::fields

Key-value pairs, one per line. Useful for order details, invoice line items, etc.

::: fields
Order ID: {{order.id}}
Status: {{order.status}}
Total: {{order.total}}
:::

:::media

Embedded image, video, or file. Use the type parameter to specify the media type.

::: media type=image
![Product photo](https://cdn.example.com/product.jpg)
:::
 
::: media type=video
[Watch the demo](https://cdn.example.com/demo.mp4)
:::

Params: type=image (default), type=video, type=file.

:::columns

Multi-column layout with nested :::col blocks.

::: columns
::: col
**Shipping Address**
123 Main St
New York, NY 10001
:::
::: col
**Billing Address**
456 Oak Ave
San Francisco, CA 94102
:::
:::

:::list

Styled list.

::: list
- Choose your plan
- Add your team
- Start sending
:::

:::raw

Raw channel-native code. An escape hatch for channel-specific features that directives don't cover.

::: raw
```html
<table style="width:100%">
  <tr><td>Custom HTML</td></tr>
</table>
```
:::

The content must be a fenced code block inside the directive.

:::highlight

Dark card with prominent text. Use for announcements, special offers, or key information that must stand out.

::: highlight
Limited-time offer: 50% off all plans!
:::

:::centered

Center-aligned text block. Use for taglines, thank-you messages, or any content that reads better centered.

::: centered
Thank you for being a customer.
:::

Control flow directives

:::if / :::else

Conditional rendering. See the control flow page for full details.

::: if order.shipped
Your order has shipped!
:::else
Your order is being processed.
:::

:::each

Loop over an array. See the control flow page for full details.

::: each order.items as item
- {{item.name}} x {{item.qty}} -- ${{item.price}}
:::