[Card] docs updated for XY Grid closes #10565

Here you go @IamManchanda; as discussed

diff --git a/docs/pages/card.md b/docs/pages/card.md
index 877b318376e487e2d0f3a1da5473a8279a58b4eb..3550c81c72c2324fff4ecac286fb4405e6fd425f 100644 (file)
--- a/docs/pages/card.md
+++ b/docs/pages/card.md
@@ -166,13 +166,44 @@ You can either set the width of cards with custom css or add them into the Found
 </div>
 
 ```html_example
+<div class="grid-container">
+  <div class="grid-x grid-padding-x small-up-2 medium-up-3">
+    <div class="cell">
+      <div class="card">
+        <img src="assets/img/generic/rectangle-1.jpg">
+        <div class="card-section">
+        <h4>This is a row of cards.</h4>
+          <p>This row of cards is embedded in an X-Y Block Grid.</p>
+        </div>
+      </div>
+    </div>
+    <div class="cell">
+      <div class="card">
+        <img src="assets/img/generic/rectangle-1.jpg">
+        <div class="card-section">
+          <h4>This is a card.</h4>
+          <p>It has an easy to override visual style, and is appropriately subdued.</p>
+        </div>
+      </div>
+    </div>
+    <div class="cell">
+      <div class="card">
+        <img src="assets/img/generic/rectangle-1.jpg">
+        <div class="card-section">
+          <h4>This is a card.</h4>
+          <p>It has an easy to override visual style, and is appropriately subdued.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="row small-up-2 medium-up-3">
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
       <div class="card-section">
-        <h4>This is a card.</h4>
-        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+        <h4>This is a row of cards.</h4>
+        <p>This row of cards is embedded in an Flex Block Grid.</p>
       </div>
     </div>
   </div>
@@ -200,8 +231,8 @@ You can either set the width of cards with custom css or add them into the Found
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
       <div class="card-section">
-        <h4>This is a card.</h4>
-        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+        <h4>This is a row of cards.</h4>
+        <p>This row of cards is embedded in a Float Grid.</p>
       </div>
     </div>
   </div>