Callouts

Callouts are blockquotes with a typed header. Useful for asides, warnings, examples — anything you want visually distinct.

Syntax

> [!note]
> A neutral aside.

> [!warning]
> Be careful here.

> [!tip] Custom title
> This callout has a custom title instead of "Tip".

> [!example]+
> Foldable, starts open. Use `-` to start closed.

Any [!type] parses as a callout — the type word becomes a CSS class. Lettuce ships distinct colours and icons for these: note, tip, success, warning, caution, danger, error, bug, plus the agent-only ai / ai-done. Any other type (e.g. info, example, quote) still renders as a callout, but falls back to the neutral note style.

Folding

> [!note]+ starts expanded with a fold control. > [!note]- starts collapsed. Without a suffix, the callout is non-foldable.

Nested content

Callouts can contain any Markdown:

> [!tip] Nested example
> 
> Here's a list:
> - First
> - Second
>
> ```python
> def hello():
>     print("hi")
> ```
>
> And a [[wikilink]].

Styling

The renderer emits a callout-<type> class and the stylesheet supplies the colour and a masked line icon. The styled groups:

A custom type you write — say [!example] — still renders as a proper callout, it just inherits the neutral note colour and icon. In non-Lettuce renderers it degrades to a plain blockquote; Lettuce’s own renderer (used in-app, in QuickLook, and for the published site) is the only one that knows about these classes.

When to use which

A short opinion:

• tip for actionable advice the reader can use right now.

• warning (or caution) for “you can break things this way”.

• danger for “this is destructive or irreversible”.

• note for background context.

Don’t reach for danger everywhere — if everything is alarming, nothing is.

Related

• Core concepts/03 Frontmatter — the frontmatter keys Lettuce reads

• Publishing/02 The static site — callouts in published HTML