Flexible card components for displaying content in contained, structured layouts.
A basic card with just a body section. Simple and clean.
Another basic card. Cards provide structure and visual separation for content blocks.
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 what-card component with just a title prop.
Using the what-card component with both title and footer props.
Compact padding for smaller content areas.
Standard padding for regular content.
Extra padding for spacious layouts.
No border, shadow instead for a floating appearance.
No border, subtle background for a minimal look.
Thicker border for emphasis and definition.
This card lifts on hover with a shadow effect.
Perfect for clickable list items or selections.
Great for selection-based UIs and dashboards.
A card with primary color accent for key information.
A card with success color accent for positive outcomes.
A card with warning color accent for cautionary notices.
A card with danger color accent for critical alerts.