Admonition Paragraphs

Using Text Captions

Table of Contents
NOTE: This is an example note.

[NOTE]
Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.

Renders:

Note
This is an example note.
Note
Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.
IMPORTANT: This is another example more important.

Renders:

Important
This is another example more important.
CAUTION: This is another example important but less.

Renders:

Caution
This is another example important but less.
WARNING: This is a warning example.

Renders:

Warning
This is a warning example.
[icon="./images/icons/example.png"]
NOTE: What lovely war.

Renders:

Note
What lovely war.
[TIP]
.A TIP admonition block
=====================================================================
Qui in magna commodo, est labitur dolorum an. Est ne magna primis
adolescens.

. Fusce euismod commodo velit.
. Vivamus fringilla mi eu lacus.
  .. Fusce euismod commodo velit.
  .. Vivamus fringilla mi eu lacus.
. Donec eget arcu bibendum
  nunc consequat lobortis.
=====================================================================

Renders:

Tip
A TIP admonition block

Qui in magna commodo, est labitur dolorum an. Est ne magna primis adolescens.

  1. Fusce euismod commodo velit.
  2. Vivamus fringilla mi eu lacus.
    1. Fusce euismod commodo velit.
    2. Vivamus fringilla mi eu lacus.
  3. Donec eget arcu bibendum nunc consequat lobortis.

Behind the scene

Render is make with these CSS rules
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/stylesheets/admonition-text.css]
.

/*
   Bootstrap backend styles of Handbook for admonitionblock text captions only
*/

.admonition {
    /* bootstrap 3 .alert style */
    padding: 15px;
    margin-bottom: 21px;
    border: 2px solid transparent;
    border-radius: 4px;
}
.note {
    border-color: olive;
}
.tip {
    border-color: blue;
}
.warning {
    border-color: yellow;
}
.caution {
    border-color: fuchsia;
}
.important {
    border-color: red;
}
.note .icon {
    color: olive;
}
.tip .icon {
    color: blue;
}
.warning .icon {
    color: yellow;
}
.caution .icon {
    color: fuchsia;
}
.important .icon {
    color: red;
}
.admonition .icon {
    float: none;
    font-size: 1.33em;
}
.admonition .icon .title {
    margin: 0;
    text-transform: uppercase;
}
.admonition .content {
    padding-left: 0;
    padding-top: 0.5em;
    margin-left: 0;
    border-left: 0;
    border-top: 3px solid #DDDDDD;
}

If you want to modify this render, copy at least the following CSS rules in your user.css theme stylesheet (e.g. readable/user.css) and apply all changes you want.

  • .admonition

  • .admonition .icon

  • .admonition .icon .title

  • .admonition .content