Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.
Cards
TailwindProvides container elements that wrap and separate content
Stylesheets
Package
Source
Doc
Examples
Getting Started
Both block elements and anchors are supported.
<div class="card p-4">Basic</div><a href="/" class="card p-4">Link</a>Hover Effect
Anchor cards have an inherent hover style. Add .card-hover to provide a 3D hover effect.
<div class="card card-hover p-4">Hover</div>Variants
Supports all standard variant styles via .variant-[style]-[color].
<div class="card variant-filled-primary p-4">Skeleton</div>Filled
primary
secondary
tertiary
success
warning
error
surface
Soft
primary
secondary
tertiary
success
warning
error
surface
Ringed
primary
secondary
tertiary
success
warning
error
surface
Ghost
primary
secondary
tertiary
success
warning
error
surface
Glass
The glass variant provides a tinted and blurred glass-like effect. Recommended when overlapping a background image.
primary
secondary
tertiary
success
warning
error
surface
Headers and Footers
If you wish the split the card into regions, use the following structure.
<div class="card">
<header class="card-header">(header)</header>
<div class="p-4">(body)</div>
<footer class="card-footer">(footer)</footer>
</div>