changes callout class and updates docs

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index 3e526130555caa7a94e3e3561dbd453404edf925..4730469cb9329372d1b503b91b55cec7af998b8c 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -9,7 +9,7 @@ tags:
 
 ## Basics
 
-Al Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` applied to the innermost `<th>`.
+A Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` on the outer `<table>` (for bottom margin) and the `.callout-inner` applied to the innermost `<th>`.
 
 When using [Inky](inky.html) HTML, the `<callout>` tag will create this structure for you. You can wrap them around a row or inside a column.
 

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index cd667fb5b47b1bdf5b58c2c2981c4ce87f69dc76..17ae6dde84d21f2626aec0eb61592719d2bec8a9 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -47,7 +47,7 @@ table.callout {
   Margin-bottom: $callout-margin-bottom;
 }
 
-th.callout {
+th.callout-inner {
   width: 100%;
   border: $callout-border;
   padding: $callout-padding;