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.
- 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.
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