Cards
Outline the purpose of these components here...
Simple Card (Vertical)
This card contains text only, no image, just a plain simple text card.
It also omits header and footer areas.
It is 1/4 of the parent container width.
<div class="w-1/4 border border-gray-500 flex flex-col gap-4 p-4">
<p>This card contains text only, no image, just a plain simple text card.</p>
<p>It also omits header and footer areas.</p>
<p>It is 1/4 of the parent container width.</p>
</div>
Card (Vertical)
Card Header
This card contains text only, no image, just a plain simple text card.
It also omits header and footer areas.
It is 1/4 of the parent container width.
Card Footer Content
<div class="w-1/4 border border-gray-500 flex flex-col gap-4 p-4">
<div class="bg-gray-800 text-gray-200 p-4 -m-4 mb-0">
<h4 class="text-bold text-xl">Card Header</h4>
</div>
<div class="flex flex-col gap-4">
<p>This card contains text only, no image, just a plain simple text card.</p>
<p>It also omits header and footer areas.</p>
<p>It is 1/4 of the parent container width.</p>
</div>
<div class="bg-gray-200 text-gray-800 p-4 -m-4 mt-0">
<p>Card Footer Content</p>
</div>
</div>
Card (Vertical)
Card Header
'Rollercoaster' by peve.de is licensed under Creative Commons (CC BY-NC-ND 2.0)
Card with Header, image, content, and footer
It is 1/4 of the parent container width.
Card Footer Content
<div class="w-1/4 border border-gray-500 flex flex-col gap-4 p-4">
<div class="bg-gray-800 text-gray-200 p-4 -m-4 mb-0">
<h4 class="text-bold text-xl">Card Header</h4>
</div>
<div class="-m-4 mb-2 max-h-48 overflow-hidden">
<img src="../../assets/img/2432164872_8c6403c877_c.jpg" alt="Rollercoaster"
class="w-full">
</div>
<div class="flex flex-col gap-4">
<p>Card with Header, image, content, and footer</p>
<p>It is 1/4 of the parent container width.</p>
</div>
<div class="bg-gray-200 text-gray-800 p-4 -m-4 mt-0">
<p>Card Footer Content</p>
</div>
</div>
Component Name
Component demo
<p>Component Code</p>