From 73c35c026bebc16ed56cf7d1d5e741a8dcf9a557 Mon Sep 17 00:00:00 2001
From: Sarah White <graphitefriction@gmail.com>
Date: Tue, 6 Feb 2018 13:10:43 -0700
Subject: [PATCH] add admonition section to UI style guide

---
 docs/modules/ROOT/pages/style-guide.adoc | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

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