[Docs] Match headers for large and small callouts

Previously the large and small callouts were headed with 'This is a secondary panel' even though it wasn't actually a secondary callout and as a visual description doesn't match the styles used in the coloring section.

This PR modifies the header text in these examples to match the style used in the coloring section and explains the example using the class names ('small callout' and 'large callout') in the same manner as with the coloring section.

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index acf97269c0e34ebe11e8e7eab0fbd93694c091b7..ec1363847ba4ab95d1b28ae6226f20d59b5babab 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -71,13 +71,13 @@ Callouts can be sized using the `.small` and `.large` classes. These will affect
 
 ```html_example
 <div class="callout small">
-  <h5>This is a secondary panel</h5>
+  <h5>This is a small callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>
 
 <div class="callout large">
-  <h5>This is a secondary panel</h5>
+  <h5>This is a large callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>