Flexible content containers for organizing and displaying information.
Basic Cards
Simple Card
This is a basic card with just a body. Perfect for simple content display.
Card with Header
This card includes a header section for titles and actions.
Card with Footer
This card includes a footer section for actions or meta information.
Complete Card
A complete card with header, body, and footer sections.
Colored Cards
Primary Card
Card with primary color theme.
Success Card
Card with success color theme.
Warning Card
Card with warning color theme.
Danger Card
Card with danger color theme.
Statistics Cards
Interactive Cards
Collapsible Card
This card can be collapsed and expanded. Click the minus/plus button in the header.
Content that can be hidden to save space when not needed.
Card with Tabs
Overview content goes here. This is the default active tab.
Detailed information is displayed in this tab.
Settings and configuration options would be shown here.
Advanced Card Features
Analytics Dashboard Overview
This card demonstrates icon in title with tool buttons. The title will truncate with ellipsis when it's too long.
This is a Very Long Card Title That Should Be Truncated With Ellipsis When It Exceeds Available Space
Notice how the title truncates with ellipsis (...) when there's not enough space due to the tool buttons.
Project Management
Different combinations of icons and tool button styles work well together.
Revenue Metrics and KPI Tracking System
Even with fewer tools, the title still truncates appropriately to maintain layout.
Data Display Cards
Recent Orders
| Order ID | Customer | Amount | Status |
|---|---|---|---|
| #1234 | John Doe | $299.99 | Completed |
| #1235 | Jane Smith | $149.50 | Pending |
| #1236 | Bob Johnson | $89.99 | Processing |