{% callout %}

Attributes

Parameter	Type	Required	Description
color	string	✓	CSS color value — used as left-border accent and 5% opacity background tint (e.g. #ef4444, blue, #10b981)
icon	string	—	Web Awesome icon name (e.g. lightbulb, warning, check) — rendered inline before the first line of content

Valid Parent Contexts

This tag is valid inside: {% article %}, {% slide %}

Rules

Rule	Force	Realm	Reference	Description
callout-valid-in-slide	must	global	—	is permitted inside — it is one of the few article child tags allowed within carousel slides. carouselauthoring

The body of \{% callout %\} supports full Markdown: bold, italics, bullet lists, inline code, and links.

Rendering

ArticleCallout.astro renders a bordered box with a left-border line in color and a 5% opacity background tint derived from color. If icon is provided, a Web Awesome icon appears inline before the first content line.

Raw CSS color values are accepted directly — named colors (blue, red), hex (#3b82f6), and rgb() / hsl() all work. Named presets are not enforced; the author controls the exact shade.

Warning callout with icon and bold lead

tagcalloutarticle callout-tag-warning

{% callout icon="warning" color="#ef4444" %}
**Design implication:** If our conversation tool can detect escalation patterns
that map to the Four Horsemen, we could offer gentle interventions *before*
the interaction becomes destructive.
{% /callout %}

Info callout with lightbulb icon

tagcalloutarticle callout-tag-insight

{% callout icon="lightbulb" color="#3b82f6" %}
**Insight:** "Flooding" has a measurable signature — elevated heart rate above 100 BPM,
reduced capacity for perspective-taking.
{% /callout %}

Success callout with bullet-list body

tagcalloutarticleslide callout-tag-checklist

{% callout icon="check" color="#10b981" %}
**Design principles derived from research:**

- Never intervene punitively — all prompts must feel like invitations
- Optimise for the pre-flood window
- Honour withdrawal as a valid regulatory strategy
{% /callout %}