Admonitions

Admonitions (AKA call-outs) are a great way to interject a post with tips, warnings, questions, and other items related to your content.

Leaf vs Container¶

Admonitions come in two varieties: leaves and containers. Leaf admonitions have a title while container admonitions include a title and a body.

Leaf admonition¶

Here's an example of a leaf admonition.

::info[Admonitions are cool]

Structure¶

Leaf admonitions have the following structure:

• two colons ::
• followed by the type (e.g. info)
• followed by the title in square brackets (e.g. [Admonitions are cool])
• followed by the properties in curly braces (e.g. { icon="dog" })

Container admonition¶

Here's an example of a container admonition.

:::info[Admonitions are cool]
I love them
:::

Structure¶

Container admonitions have the following structure:

• three colons :::
• followed by the type (e.g. info)
• followed by the title in square brackets (e.g. [Admonitions are cool])
• followed by the properties in curly braces (e.g. { icon="dog", collapse=true })
• followed by the body content
• followed by three colons :::

Type¶

::quote[A quote]
Here's a quote
:::

:::help[Some help]
Here's some help
:::

:::tip[A tip]
Here's a tip
:::

:::warning[A warning]
Here's a warning
:::

:::idea[An idea]
Here's an idea
:::

:::answer[An answer]
Here's an answer
:::

:::success[A success]
Here's a success
:::

:::abstract[An abstract]
Here's an abstract
:::

:::summary[A summary]
Here's a summary
:::

:::info[Some info]
Here's some information
:::

:::note[A note]
Here's a note
:::

:::question[A question]
Here's a question
:::

:::hint[A hint]
Here's a hint
:::

:::important[Something important]
Here's something important
:::

:::error[An error]
Here's an error
:::

:::danger[Something dangerous]
Here's something dangerous
:::

:::bug[A bug]
Here's a bug
:::

:::example[An example]
Here's an example
:::

Title¶

You can include a title for your admonition by writing it inside square brackets. This is sometimes refered to as the tag label.

:::info[Here's my title]
What do you think?
:::

You can even write titles using Markdown.

:::tip[**Here's** _title_ with `markdown`]
Cool, eh?
:::

Icon¶

Each admonition has its own default Lucide icon that you can change via the icon property.

:::abstract[Gripe]{icon="annoyed"}
Something can't be _very_ unique. It's either unique or it isn't!
:::

You can browse the full list of icons at lucide.dev/icons

Collapse¶

You can make a container admonition collapsible by adding the collapse property in curly braces, setting it equal to true or false to specify the default state.

Default collapsed¶

Here's a collapsible admonition that's collapsed by default.

:::answer[Answer]{ collapse=true }
The answer is 42.
:::

Default expanded¶

Here's a collapsible admonition that's expanded by default.

:::answer[Answer]{ collapse=false }
The answer is 42.
:::

Nesting¶

Container admonitions can be nested by adding an extra colon to the parent tag. (The same trick applies to other container elements like popovers and blur screens.)

::::question[Question]
 
Why did the chicken cross the road?
 
:::answer[Answer]
To get to the other side
:::
 
::::