Cards
Feature cards for icon + title + description grids. Additional card types (content, pricing, testimonial) will be added as pages require them.
Card Variants
Three visual treatments available. Feature cards use flat — the other variants are here for reference when additional card types are added.
Default
Border + subtle shadow. The workhorse for content sections and lists.
Elevated
Shadow only, lifts on hover. For interactive or featured items.
Flat
Tinted background, no border. For grouped or low-emphasis content.
Anatomy
Class breakdown per variant. The component accepts variant and padding props.
| Variant | Classes | Use case |
|---|---|---|
| default | rounded-lg p-6 bg-card border shadow-sm | Content lists, dashboards, general containers |
| elevated | rounded-lg p-6 bg-card shadow-lg hover:shadow-xl | Interactive items, featured tiers, selectable options |
| flat | rounded-lg p-6 bg-muted | Feature grids, grouped content, low-emphasis |