Cards

Default card
A simple card with title, content, and footer.
Filled card
Uses a subtle background fill instead of white.
Outlined card
Transparent background with a stronger border.
Primary accent card with yellow tint.
Secondary accent card with mint tint.
Elevated card with a soft shadow.

Sizes

Small card
Compact padding and radius.
Large card
Generous padding and larger radius.

Status cards

Healthy

All systems operational.

Pending

Waiting for approval.

Failed

Build failed at step 4.

Metric card

Monthly usage

84.2%

+12.8% vs previous period

Horizontal card

Project Alpha

Compact horizontal layout for content listings, search results, and entity rows.

Updated 2h ago Active

Login card

User card — compact

User card — full

Eugene Sukhodolskiy goldmikki@gmail.com Lead Frontend Engineer

Vue cards

Vue action card

Vue card gallery