LifeDS

Component

Card

Composable content container. Supports header, footer, action slot and two size variants.

sizedefault · sm
CardHeadertitle + description + optional action
CardContentfree-form body
CardFooteraction area with muted background
CardActionslot pinned to top-right of header
Playground
Card Title
A short description of the card content.

CardContent — free-form area for any content.

Anatomy — all parts

Card Title
Card Description — subtitle or context

CardContent — free-form area for any content. Padding is inherited via --card-spacing.

CardFooter
Card Title — sm
size="sm" reduces padding and title font size

Same structure, tighter spacing — ideal for dense layouts.

CardHeader — variations

Title only

Header with CardTitle only.

Title and description
Supplemental text below the title.

Standard two-line header.

With CardAction
Slot pinned to the top-right corner.

CardAction accepts any element.

CardFooter — variations

Single action

Footer with one CTA.

Two actions

Footer with primary and secondary action.

Justify between

Footer with metadata left, action right.

Last edited: today

No CardHeader — direct content

Total revenue

$48,295

+12.4% vs. last month

Add item

Click to create a new record.

With image

Image placeholder
Image on top
Top corners are rounded automatically.

Content below the image.

Image placeholder
With badge
Combining image and badge in the header.
New
Image on bottom
Works in both directions.

Image at the end of the card.

Image placeholder

With Avatar

MJ
Maria Johnson
Product Designer

Avatar inside the header — useful for profiles, comments and timelines.

Project team
3 active members
MJ

Maria Johnson

Designer

CL

Carlos Lima

Engineer

AT

Ana Torres

Product

Sizes — default vs sm

size="default" — padding 1rem (16px)
Default card
--card-spacing: spacing(4)

Standard spacing for most use cases.

size="sm" — padding 0.75rem (12px)
Small card
--card-spacing: spacing(3)

Compact — ideal for dense dashboards.

Metric cards — dashboard pattern

Active users

12,482

+8.2%

Sessions today

3,941

+1.4%

Bounce rate

24.1%

-3.7%

Avg. session

4m 32s

+0.5%

Tokens used

5 semantic tokens consumed by this component.

--cardCard
bg-card
--card-foregroundCard Foreground
text-card-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder