Add album example

source/_includes/card.html.twig

@@ -0,0 +1,27 @@
+<div class="bg-white border rounded-md overflow-hidden border-gray-200 shadow-sm max-w-sm">
+  <img alt="" class="w-full h-auto object-cover" 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" />
+
+  <div class="p-4 font-sans">
+    <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 class="mt-6 flex items-center justify-between">
+      <div>
+        <ul class="flex border border-gray-500 divide-x divide-gray-500 text-sm text-gray-500 rounded">
+          <li>
+            <a class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white" href="#0">View</a>
+          </li>
+          <li>
+            <a class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white" href="#0">Edit</a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <p class="text-sm text-gray-500">
+          <span class="sr-only">Reading time:</span>9 minutes
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+