You can create alert boxes of various kinds using the CSS classes
admonition
, warning
, tip
, note
, seealso
and todo
.
These are meant to be similar to
Bootstrap's alerts,
Semantic UI's messages,
or the various admonitions
and see also's
etc provided by reStructuredText and Sphinx.
To use an alert write a <div>
with a CSS class on it, like this:
<div class="note">
This is a note.
</div>
If you want to use Markdown rather than raw HTML inside the <div>
then add a
markdown="1"
attribute to it:
<div class="note" markdown="1">
Now I can use things like Markdown `code` and [links](example.com).
</div>
Here are all the available styles:
This is a generic admonition.
This is a warning box.
Also known as an `attention`, `caution`, `danger`, `error`, or `important` box.
This is a `tip` or `hint` box.
This is a note.
This is a seealso.
This is a todo.
All of the alert box styles have special colors for links:
This is a generic admonition [with a link](example.com) in it.
This is a warning [with a link](example.com) in it.
This is a tip or hint [with a link](example.com) in it.
This is a note [with a link](example.com) in it.
This is a seealso [with a link](example.com) in it.
This is a todo [with a link](example.com) in it.
You can put arbitrary HTML inside alert boxes (remember your markdown="1"
if
using Markdown):
### Todo
- List item one
- List item two
- List item three
Aliquam eu quam blandit, condimentum velit nec, hendrerit urna.