1# Callouts Reference
2 
3## Basic Callout
4 
5```markdown
6> [!note]
7> This is a note callout.
8 
9> [!info] Custom Title
10> This callout has a custom title.
11 
12> [!tip] Title Only
13```
14 
15## Foldable Callouts
16 
17```markdown
18> [!faq]- Collapsed by default
19> This content is hidden until expanded.
20 
21> [!faq]+ Expanded by default
22> This content is visible but can be collapsed.
23```
24 
25## Nested Callouts
26 
27```markdown
28> [!question] Outer callout
29> > [!note] Inner callout
30> > Nested content
31```
32 
33## Supported Callout Types
34 
35| Type | Aliases | Color / Icon |
36|------|---------|-------------|
37| `note` | - | Blue, pencil |
38| `abstract` | `summary`, `tldr` | Teal, clipboard |
39| `info` | - | Blue, info |
40| `todo` | - | Blue, checkbox |
41| `tip` | `hint`, `important` | Cyan, flame |
42| `success` | `check`, `done` | Green, checkmark |
43| `question` | `help`, `faq` | Yellow, question mark |
44| `warning` | `caution`, `attention` | Orange, warning |
45| `failure` | `fail`, `missing` | Red, X |
46| `danger` | `error` | Red, zap |
47| `bug` | - | Red, bug |
48| `example` | - | Purple, list |
49| `quote` | `cite` | Gray, quote |
50 
51## Custom Callouts (CSS)
52 
53```css
54.callout[data-callout="custom-type"] {
55  --callout-color: 255, 0, 0;
56  --callout-icon: lucide-alert-circle;
57}
58```
59