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
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
primary
secondary
tertiary
success
warning
error
surface
Getting Started
<div class="card p-4">Basic</div><a href="/" class="card p-4">Link</a>Styles
Background color styling.
<div class="card !bg-primary-500 text-on-primary-token p-4">primary</div>Glass background styling. These are semi-transparent with a slight blur effect.
<div class="card variant-glass-primary p-4">glass-primary</div>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>