Use <th> instead of <td> for callouts, which prevents nested grids from breaking...

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index c5e0b83a434cffea46205d5782a4e191a3b81f0c..d05b7983b0af5f18f86ad5995829d8d4b7327884 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -38,7 +38,7 @@ $callout-border-warning: 1px solid darken($warning-color, 20%) !default;
 /// @type Border
 $callout-border-alert: 1px solid darken($alert-color, 20%) !default;
 
-td.callout {
+th.callout {
   width: 100%;
   border: $callout-border;
   padding: $callout-padding;

diff --git a/test/visual/pages/callout-in-grid.html b/test/visual/pages/callout-in-grid.html
new file mode 100644 (file)
index 0000000..c74aaa2
--- /dev/null
+++ b/test/visual/pages/callout-in-grid.html
@@ -0,0 +1,17 @@
+<container>
+  <row>
+    <columns>
+      <callout class="secondary">
+        <row>
+          <columns>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus perferendis doloremque quod quam nisi, unde ipsum qui, nesciunt reiciendis adipisci. Ratione nemo adipisci aspernatur quaerat tempore omnis delectus ipsam!</p>
+          </columns>
+          <columns>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, doloremque explicabo aperiam vitae autem dolorum id placeat cumque praesentium qui, similique rerum error quibusdam sed officia eligendi obcaecati illum. Quo!</p>
+          </columns>
+        </row>
+      </callout>
+    </columns>
+  </row>
+
+</container>