Cards
Flexible card components for displaying content in contained, structured layouts.
Basic Card
A basic card with just a body section. Simple and clean.
Another basic card. Cards provide structure and visual separation for content blocks.
Full Card Structure
Project Settings
Manage your project configuration
This card has a header with title and subtitle, a body section for content, and a footer with action buttons.
Using the Component
Simple Card
Using the what-card component with just a title prop.
Card with Footer
Using the what-card component with both title and footer props.
Size Variants
Small Card
Compact padding for smaller content areas.
Default Card
Standard padding for regular content.
Large Card
Extra padding for spacious layouts.
Style Variants
Elevated
No border, shadow instead for a floating appearance.
Flat
No border, subtle background for a minimal look.
Bordered
Thicker border for emphasis and definition.
Interactive Card
Hover Me
This card lifts on hover with a shadow effect.
Click Me
Perfect for clickable list items or selections.
Select Me
Great for selection-based UIs and dashboards.
Color Variants
Primary Card
A card with primary color accent for key information.
Success Card
A card with success color accent for positive outcomes.
Warning Card
A card with warning color accent for cautionary notices.
Danger Card
A card with danger color accent for critical alerts.