Callouts Reference

Basic Callout

> [!note]
> This is a note callout.

> [!info] Custom Title
> This callout has a custom title.

> [!tip] Title Only

Foldable Callouts

> [!faq]- Collapsed by default
> This content is hidden until expanded.

> [!faq]+ Expanded by default
> This content is visible but can be collapsed.

Nested Callouts

> [!question] Outer callout
> > [!note] Inner callout
> > Nested content

Supported Callout Types

| note | - | Blue, pencil |
| abstract | summary, tldr | Teal, clipboard |
| info | - | Blue, info |
| todo | - | Blue, checkbox |
| tip | hint, important | Cyan, flame |
| success | check, done | Green, checkmark |
| question | help, faq | Yellow, question mark |
| warning | caution, attention | Orange, warning |
| failure | fail, missing | Red, X |
| danger | error | Red, zap |
| bug | - | Red, bug |
| example | - | Purple, list |
| quote | cite | Gray, quote |

Custom Callouts (CSS)

.callout[data-callout="custom-type"] {
  --callout-color: 255, 0, 0;
  --callout-icon: lucide-alert-circle;
}