Callouts
Callouts are a great way to highlight content and add notes, warnings, or other special messages to your posts.
Usage
To create a callout, add [!type] to the first line of a quote, where type is the type identifier. The type identifier determines how the callout looks and feels. To see all available types, refer to Supported types.
The type identifier is case-insensitive.
[!tip]
Tip: Use code snippets to enhance readability. They provide clarity and precision.
Custom title
By default, the title of the callout is its type identifier in title case. You can change it by adding text after the type identifier:
> [!question] Custom Label 🤗
> Callouts labels can be customized.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> They can also contain special inline formatting like dynamic dates.
[!question] Custom Label 
Callouts labels can be customized.
[!abstract] 2032-12-21T23:00:00Z
They can also contain special inline formatting like dynamic dates.
You can also create title-only callouts:
> [!success] solved.
[!success] solved.
Foldable callouts
You can make a callout foldable by adding a plus + or a minus - directly after the type identifier.
- “+” expands the callout by default
- “-” collapses it instead
> [!todo]- My Todo List
>
> - [x] Write documentation
> - [ ] Add tests
> - [ ] Review code
> [!todo]+ My Expanded Todo List
>
> - [x] Create repository
> - [ ] Setup CI/CD
> - [ ] Deploy to production
[!todo]- My Todo List
- Write documentation
- Add tests
- Review code
[!todo]+ My Expanded Todo List
- Create repository
- Setup CI/CD
- Deploy to production
Nested callouts
You can nest callouts in multiple levels.
> [!question] Can callouts be nested?
>
> > [!todo] Yes!, they can.
> >
> > > [!example] You can even use multiple layers of nesting.
> [!tip]
> Here's a helpful tip
>
> > [!info]
> > With some additional information
> >
> > > [!example]
> > > And a nested example
>
> Back to the main tip
[!question] Can callouts be nested?
[!todo] Yes!, they can.
[!example] You can even use multiple layers of nesting.
[!tip]
Here’s a helpful tip
[!info]
With some additional information
[!example]
And a nested example
Back to the main tip
Supported default types
You can use several callout types and aliases.
Each type comes with a different background color and icon.
You can create your callouts or manage the default ones.
See the callouts setting.
Any unsupported type defaults to the note type. See Default Fallbacks section for more information.
The type identifier is case-insensitive.
| Type |
Description |
Aliases |
note |
For general notes and information |
- |
abstract |
For summaries or abstract sections |
summary, tldr |
info |
For informational content |
- |
todo |
For task lists or todo items |
- |
tip |
For tips and important information |
hint, important |
success |
For success messages |
check, done |
question |
For questions and FAQs |
help, faq |
warning |
For warnings |
caution, attention |
failure |
For failure notices |
fail, missing |
danger |
For danger or error messages |
error |
bug |
For bug reports or known issues |
- |
example |
For examples |
- |
quote |
For quotes |
cite |
Callout examples 2
f-wobble:
