Codebase cards are built entirely of utility classes – they have no unique card CSS.
Control the width of a card any way that makes sense in your design. “Raise” cards with a box-shadow – or not. Give them rounded corners – or not. Add an image if you need to. Or a header and footer. You’ll probably want a call-to-action button or link. But it’s all up to you.
A simple card
Photo by Oleg Magni from Pexels.
<div class="flex flex-column w-xxs mx-auto rounded overflow-hidden bs-1 mb-2">
<a href="" class="aspect-ratio-16x9 relative">
<img class="box img-cover" src="" width="" height="" loading="lazy" alt="">
</a>
<div class="grow p-2">
<div class="h4 mb-2">Card Title</div>
<p class="mb-2">
Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.
</p>
<a href="#/" class="btn btn-primary">Button</a>
</div>
</div>Header and footer
Another example, with a header and a footer — and a thin border instead of a box shadow:
Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus.
<div class="mx-auto b-thin rounded">
<div class="bb-thin p-cell">Header</div>
<div class="flex flex-column">
...
</div>
<div class="bt-thin p-cell">Footer</div>
</div>Segments
Another example, with multiple mid-sections:
<div class="b-thin rounded">
<div class="bb-thin p-cell">
Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.
</div>
<div class="bb-thin p-cell">
Imperdiet evertitur no usu, his te suavitate salutatus.
</div>
<div class="bb-thin p-cell">
Nullam ridens deterruisset an duo.
</div>
<div class="p-cell">
Cum harum insolens ei, cum probo placerat praesent et.
</div>
</div>Scrollable body
Example with a scrollable main content – and a specified height that’s less than the main content height, so that there's something to scroll for:
Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim.
Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.
Movet voluptaria voluptatum has at, qui cu timeam ancillae democritum. Ad veniam detraxit his. In est bonorum fabulas deleniti, eam ex soluta verear albucius. Sale aperiri repudiandae eu cum, at cum sint dicunt. Prima tibique constituto cum ne, quidam dolorem detraxit pro no, sea an aeque zril.
Et ponderum tacimates vim. Laudem ornatus intellegam no cum. Porro omittantur pro te. Iisque mandamus ei eum. Pri idque iudico appetere ex. Has no altera veritus civibus.
At civibus aliquando usu. Vide libris has ut, eum illum luptatum ad. Quando scripta nusquam est te. Eleifend principes pertinacia sed cu, vix ut meis diceret salutandi, ea inermis ocurreret voluptatibus eam. Ei vidisse conclusionemque eam, vix eros mediocrem at. Graeco laboramus te mea, ius fabellas consequat voluptatum et.
<div class="flex flex-column w-xxs mx-auto mb-2 b-thin rounded" style="height: 400px;">
<div class="bb-thin p-cell">Header</div>
<div class="grow overflow-y p-2">
<div class="h4 mb-2">Card Title</div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="bt-thin p-cell">Footer</div>
</div>Complex example with AlpineJS components
You’ve probably seen this kind of thing before, somewhere.
In the example below, the “Like” button triggers a dropdown (repositioned as a drop-up). And the “Comment” button triggers a modal. Both are powered by AlpineJS.
Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.
Comments
Freda Blogworthy and 52 others
Images attribution: robin: Pixabay; swans: Trudie Roden; gulls: Daniyal Ghanavati; owl: Eric Karits (from Pexels).