Highlight

Emphasized content block with brand color accent.

A highlight renders an emphasized content block with a brand color accent:

::: highlight
Limited time: first 100 signups get 50% off.
:::

The highlight directive uses the theme's brandColor to draw attention to important content like promotions, announcements, or key messages.

Parameters

Add space-separated parameters after the directive name to customize appearance.

::: highlight center
**50% OFF** this weekend only!
:::

Supported values: left (default), center, right.

::: highlight compact
Flash sale!
:::

Supported values: compact (12px 16px), spacious (32px 40px). The default padding is 20px 24px.

Override the default border radius (8px) with border-radius=:

::: highlight border-radius=16px
Rounder highlight.
:::

::: highlight border-radius=0
Sharp-cornered highlight.
:::

Override the text color or background color with color= and bg=:

::: highlight color=#ffffff bg=#dc2626
**URGENT:** Action required.
:::