Basic

Welcome back, Sally
Pick up where you left off — three tasks are due today.

Cards group related content and actions into a single surface. Use them for product previews, dashboard tiles, and form containers.

With Action (menu in header)

Project Atlas
Last updated 2 hours ago
In progress12 of 18 tasks complete

With Footer

Pro plan
Everything in Starter, plus advanced analytics and SSO.

$29/month

Size: sm (tighter spacing + smaller title)

Compact card
Uses gap-3 / py-3 / px-3 and a smaller title.

Useful for dense layouts — sidebars, list rows, dashboard widgets.

Image at top (auto-rounds, no top padding)

Workspace
Designing for focus
A first-image child automatically loses top padding and gets a rounded-top via the Card's child selector.
SC
Sarah ChenDesigner · 5 min read

Product card (action + footer + image)

Wireless headphones
Aurora Wireless Headphones
Studio-grade, 40h battery
$249$299Sale

Variant: mail

Templeton Peck <templeton@frappe.io>

To: Jonathan Higgins, sandeep@timeless.co, +4

Subject: Package update

3d ago

Hi Good morning, we're writing to inform you about recent updates to our inventory package that may affect your current and future orders.

Variant: message

@Sandra Bass, Great teamwork, everyone. Let's catch up with our findings.

Variant: call

Inbound Call

Missed call

14 May

Grid (3 stats)

Revenue
$12,430
+8.2% this week
Active users
2,041
+12.4% this week
Churn
1.8%
-0.3% this week