Add card markup

src/components/Card.astro

@@ -0,0 +1,23 @@
+---
+---
+
+<div>
+  <img
+    alt=""
+    src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18596650c01%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18596650c01%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
+  />
+
+  <p>
+    This is a wider card with supporting text below as a natural lead-in to
+    additional content. This content is a little bit longer.
+  </p>
+
+  <footer>
+    <ul>
+      <li><a href="#0">View</a></li>
+      <li><a href="#0">Edit</a></li>
+    </ul>
+
+    <p><span>Reading time: </span>9 minutes</p>
+  </footer>
+</div>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Button from "../components/Button.astro";
+import Card from "../components/Card.astro";
 import Jumbotron from "../components/Jumbotron.astro";
 import Navbar from "../components/Navbar.astro";
 ---
@@ -27,5 +28,11 @@ import Navbar from "../components/Navbar.astro";
         <Button shape="rounded" type="secondary" text="Secondary action" />
       </div>
     </Jumbotron>
+
+    <div>
+      {[...Array(9).keys()].map((_) => (
+        <Card />
+      ))}
+    </div>
   </body>
 </html>