Skip to content
Admonitions
Github.com

Admonitions

Void styles the standard MkDocs admonition extension, plus collapsible ??? (details) blocks and inline variants. Every type maps to a themed accent color and a small icon in the title.

Usage

!!! note
    A note uses the accent blue color.

Types

Note / Info / Example

!!! note
    A generic note.

Note

A generic note.

!!! info
    Additional information.

Custom title

Custom titles are supported.

!!! example
    An example block.

Example

An example block.

Abstract / Summary / TLDR

!!! abstract "Summary"
    A condensed takeaway.

Summary

A condensed takeaway.

Tip / Hint / Question / FAQ

!!! tip
    A helpful tip.

Tip

A helpful tip.

!!! question
    A question worth asking.

Question

A question worth asking.

Success / Done / Check

!!! success
    Everything worked.

Success

Everything worked.

Warning / Caution / Attention

!!! warning
    Watch out.

Warning

Watch out.

Danger / Error / Failure / Bug / Important

!!! danger
    This is destructive.

Danger

This is destructive.

!!! bug
    Known defect.

Bug

Known defect.

!!! important
    Really important requirement.

Important

Really important requirement.

Quote

!!! quote
    "Less, but better." — Dieter Rams

Quote

"Less, but better." — Dieter Rams

Collapsible (details)

Use ??? for an initially-closed block and ???+ for an open-by-default block.

??? note "Expand me"
    Hidden until expanded.
Expand me

Hidden until expanded.

???+ danger
    Open by default and collapsible.
Danger

Open by default and collapsible.

Inline

The inline class floats an admonition beside content.

!!! note inline
    Floats to the left in this layout.

Note

Floats to the left in this layout.

Paragraph text that wraps around the inline admonition demonstrates the floating behavior. Copy continues to flow around the floated box, letting you place short callouts against prose without breaking the reading flow.

Custom types

Any unknown type still renders as a default-styled admonition. You can add your own by defining a color for the class in your CSS:

.admonition.mytype::before {
    background: #7a5cff;
}
.admonition.mytype .admonition-title {
    color: #7a5cff;
}