Cards

Flexible content containers with multiple variants and layouts.

Basic Card

A simple card with a body, title, and some supporting text.

Learn more
Card Header
With Header

This card includes a header section at the top.

Last updated 3 mins ago
With Footer

A card with a footer showing status or actions.

Active Published
Image Top

Card with image placeholder at the top.

Image Bottom

Card with image placeholder at the bottom.

Horizontal

Side-by-side layout with image on the left.

Colored Cards
Primary

Some quick example text for the card.

Success

Some quick example text for the card.

Danger

Some quick example text for the card.

Dark

Some quick example text for the card.

Stat / KPI Cards
Total Users
24,512
12.5% this month
Revenue
$84,240
8.2% this month
Orders
1,320
3.1% this month
Bounce Rate
42.6%
1.4% this month
Profile Cards
JD
Jane Doe

Product Designer

128
Projects
4.2k
Followers
312
Following
MK
Mike Kim

Full-Stack Developer

54
Repos
2.8k
Stars
89
PRs
SR
Sara R.
UX Researcher
Online

Leading user research for the new onboarding flow redesign.

AL
Alex L.
DevOps Engineer
Away

Managing cloud infrastructure and CI/CD pipelines.

List Group Card
  • Inbox 14
  • Drafts 2
  • Sent 8
  • Trash 1
Card with Tabs

Content for the first tab panel.

Content for the second tab panel.

Content for the third tab panel.

Collapsible Card

This card body can be toggled by clicking the chevron icon in the header. Great for dashboards.

Collapsible content