add admonition section to UI style guide

1 files changed, 35 insertions, 0 deletions

diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc
index 607a3d7..11e5831 100644
--- a/docs/modules/ROOT/pages/style-guide.adoc
+++ b/docs/modules/ROOT/pages/style-guide.adoc
@@ -19,6 +19,41 @@ This document identifies these UI elements.
 The HTML in the main content area is generated from AsciiDoc using Asciidoctor.
 AsciiDoc has numerous content elements that require assistance from CSS to render properly.
 
+=== Admonitions
+
+An admonition block is a table.
+The table title element is specified by the block class: tip, note, important, warning, or caution.
+Here's an AsciiDoc source example that produces an admonition with the table title warning:
+
+[source,asciidoc]
+----
+WARNING: Watch out!
+----
+
+If font-based icons are enabled (`icons=font`), the table title text is replaced by the associated icon.
+
+[source,html]
+----
+<div class="admonitionblock warning">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-warning" title="Warning"></i>
+</td>
+<td class="content">
+<div class="paragraph">
+<p>Watch out!</p>
+</div>
+</td>
+</tr>
+</table>
+</div>
+----
+
+Here's how it might appear when the title is displayed as text:
+
+WARNING: Watch out!
+
 === Task lists
 
 A task list is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).