Add more detail to callout docs

modules/system/assets/ui/docs/callout.md

@@ -2,27 +2,62 @@
 
 ### Callout
 
-Allows the user to dismiss a callout message.
+Displays a detailed message to the user, also allowing it to be dismissed.
+
+    <div class="callout fade in callout-warning">
+        <button
+            type="button"
+            class="close"
+            data-dismiss="callout"
+            aria-hidden="true">&times;</button>
+        <div class="header">
+            <i class="icon-warning"></i>
+            <h3>Warning warning</h3>
+            <p>My arms are flailing wildly</p>
+        </div>
+        <div class="content">
+            <p>Insert coin(s) to begin play</p>
+        </div>
+    </div>
+
+### No sub-header
+
+Include the `no-subheader` class to omit the sub heading.
+
+    <div class="callout fade in callout-info no-subheader">
+        <div class="header">
+            <i class="icon-info"></i>
+            <h3>Incoming unicorn</h3>
+        </div>
+    </div>
+
+### No icon
+
+Include the `no-icon` class to omit the icon.
+
+    <div class="callout fade in callout-danger no-icon no-subheader">
+        <div class="header">
+            <h3>There was a hull breach</h3>
+        </div>
+    </div>
+
+### No header
 
     <div class="callout fade in callout-success">
         <div class="content">
             <p>Something good happened</p>
+            <ul>
+                <li>You found a pony</li>
+            </ul>
         </div>
     </div>
 
-### With header
+### Data attributes:
 
-    <div class="callout fade in callout-warning no-icon no-subheader">
-        <div class="header">
-            <h3>Warning warning</h3>
-        </div>
-        <div class="content">
-            <p>My arms are flailing wildly</p>
-        </div>
-    </div>
+- data-dismiss="callout" - when assigned to an element, the callout hides on click
 
 ## JavaScript API
 
 ### Events
 
-- close.oc.callout - triggered when a node on the tree is moved.
+- close.oc.callout - triggered when the callout is closed

modules/system/assets/ui/docs/flashmessage.md

@@ -54,12 +54,12 @@ A flash message can be rendered as a static element by attaching the `static` cl
         We couldn't help you with that (error)
     </p>
 
-### Data attributes:
+### Data attributes
 
 - data-control="flash-message" - enables the flash message plugin
 - data-interval="2" - the interval to display the message in seconds, optional. Default: 2
 
-### JavaScript API:
+### JavaScript API
 
 ```js
 $.oc.flashMsg({

modules/system/assets/ui/docs/popup.md

@@ -103,7 +103,7 @@ Using the `data-ajax` attribute you can refer to an external file or URL directl
 ### Options:
 - content: content HTML string or callback
 
-### Data attributes:
+### Data attributes
 - data-control="popup" - enables the ajax popup plugin
 - data-ajax="popup-content.htm" - ajax content to load
 - data-handler="onLoadContent" - October ajax request name
@@ -111,7 +111,7 @@ Using the `data-ajax` attribute you can refer to an external file or URL directl
 - data-extra-data="file_id: 1" - October ajax request data
 - data-size="large" - Popup size, available sizes: giant, huge, large, small, tiny
 
-### JavaScript API:
+### JavaScript API
 
 ```js
 $('a#someLink').popup({ ajax: 'popup-content.htm' })

modules/system/assets/ui/docs/tab.md

@@ -120,7 +120,7 @@ Example with data attributes (data-control="tab"):
         </div>
     </div>
 
-### JavaScript API:
+### JavaScript API
 
 - $('#mytabs').ocTab({closable: true, closeConfirmation: 'Close this tab? Unsaved data will be lost.'})
 - $('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier) - adds tab. The optional identifier parameter allows to associate a identifier with a tab. The identifier can be used with the goTo() method to find and open a tab by it's identifier.