Card
A flexible container component for grouping related content with optional header, body, and footer sections.
Examples
Card Variants
Available card styles: Simple, Bordered, Elevated, and AutoHover
Simple
This is a basic card with default styling.
Bordered
This card has a visible border.
Elevated
This card has a shadow to create elevation.
AutoHover
This card starts with a bordered style and smoothly transitions to an elevated appearance when you hover over it.
Card with Header and Footer
Complete card with all sections and action buttons
Card Title
Subtitle information
This card demonstrates header and footer sections. Headers are great for titles and subtitles, while footers work well for actions or metadata.
Interactive Card
Card with structured content for user profiles
User Profile
Jane Doe
jane@example.com
Administrator
Cards with Images
Various ways to incorporate images in cards
Image Card
Cards can feature images at the top for visual appeal.
Gallery Item
Perfect for galleries or portfolios with actions.
Featured Article
Published: Jan 22, 2026
Combine images with headers and body content for rich card layouts.
Cards with Icons
Using icons to enhance card content
Information
This card uses an icon to indicate informational content.
Messages
You have 3 new messages waiting for your review.