This is a simple card with just a body.

Card Title

Card content goes here.
Card content goes here.

Complete Card

This card has all three sections: header, body, and footer.

Dashboard

Live metrics across every connected service — updated every 30 seconds.

Body content.

Wrapping Header

This description wraps to multiple lines when the header gets narrow, instead of being clipped with an ellipsis.

Body.

Section

Body content.

Success underline

Body.

Danger underline

Body.

Theme colour 3 underline

Body.
📊

Analytics Dashboard

Use .pa-card__title when you need the title-icon combo + __actions alignment; h3 alone works too when no icon is needed.

Article Title

Published 2 hours ago
Article content.

Card with Actions

Card content.

Form Card

Form content here.

User List

NameEmail
John Doejohn@example.com

Primary Card

Body content.

Success Card

Body content.

Warning Card

Body content.

Danger Card

Body content.

Theme colour 1

Body content.

Theme colour 5

Body content.
Total Customers
156,340
▲ 6.8% vs last month
1,234
Total Users
👥
1,234
Total Users
$12,345
Revenue
+12.5%
Value went up — card tinted green until next tick.
Value went down — card tinted red until next tick.
Neutral state — back to the default card background.
Tab 1
Tab 2
Tab 3

Sales

Chart area.

Widget Pro

Click anywhere on this card to navigate.

Short Card

Minimal content.

Tall Card

More content.

Siblings stretch to match.

Medium Card

Also stretches.

Section Title

The section heading ties multiple cards together with an accent underline above them.

Standalone Section Title