Components

Card

Explore 15 interactive card examples covering common layouts, states, sizes, and real interface patterns.

Create project
Deploy your new project in one-click.

Demo

Grayscale portrait background
JB
Nick Johnson
nick@example.com
New

Author Profile

Profile card showcasing the author's avatar, name, and estimated reading time for each post.

Author profile card

Team plan
For growing product teams.
$29/seat

Billing Plan

Default Card
This card uses the default size variant.

The card component supports standard spacing for common content, actions, and section layout.

Default card

Default Card
This card uses the default size variant.

Layered panels behind the card create a subtle stacked depth effect.

Stacked depth card

Need help with a claim?

Go to this step by step guideline process on how to certify for your weekly benefits.

Help link card

Need help with a claim?

Go to this step by step guideline process on how to certify for your weekly benefits.

Help card with menu

Abstract grayscale interface
Trending

Making your design process faster and easier. Design tools for your team.

Centered image card

Abstract grayscale workspace
Trending
Featured

Simplifying your workflow from day one. Manage your tasks, projects, and team in one place.

Image feature card

Revenue

$12.4k12.5%
Vs last month: $11.0k

Metric card with actions

Revenue
Last 30 days
$48.2k
12.4%

Metric Summary

Documentation

Find guides, API references, and examples to integrate with our platform.

View docs

Resource link card

RS
Riley Scott

Product lead

Online

Owns onboarding, activation, and roadmap planning for the growth product team.

StrategyResearchRoadmap

Team member card

3 days remaining in cycle
Included CreditOn-Demand Charges
$18.08 / $20$0
Requests$210.84
Active CPU$21.95
Events$21.20
Storage Usage$20.45
Bandwidth$0.00

Expandable usage card

Header with Border

The header and footer use borders to create visual separation between card sections.

Card with bordered sections