Card
Versatile container for grouping related content.
Data DisplayTailwind CSS
Overview
Cards are containers that group related content and actions. They provide a consistent way to display information.
When to use
- To group related information
- For content previews
- For clickable/interactive content blocks
- For dashboard widgets and stats
Preview
Card Title
This is a basic card with default styling.
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
Swap these Tailwind classes to change the pattern's appearance:
Variants
| Variation | Tailwind Classes |
|---|---|
| Default | bg-surface-raised border border-default rounded-xl |
| Outlined | bg-transparent border border-default rounded-xl |
| Elevated | bg-surface-raised rounded-xl shadow-md |
| Interactive | hover:border-emphasis hover:shadow-md cursor-pointer transition-allAdd to any variant for hover effects |
Sizes
| Variation | Tailwind Classes |
|---|---|
| Small | p-4 |
| Medium | p-6Default padding |
| Large | p-8 |
Guidelines
No specific guidelines documented for this component yet.
Examples
Default
Card Title
This is a basic card with default styling.
Interactive
Interactive Card
Hover to see the shadow effect.
With Header & Footer
Card Header
Card body content goes here. You can put any content inside.
Stats Card
Total Revenue
$45,231.89
ā 20.1% from last month