Card Tokens

Card components for content organization, featuring various layouts and interactive states.

Basic Cards

Simple content containers

Card Title 1

This is a basic card using semantic design tokens for consistent styling.

Card Title 2

This is a basic card using semantic design tokens for consistent styling.

Card Title 3

This is a basic card using semantic design tokens for consistent styling.

Feature Cards

Cards with icon headers and hover states

Feature 1

Feature cards with icon headers and hover states using component tokens.

Learn more

Feature 2

Feature cards with icon headers and hover states using component tokens.

Learn more

Feature 3

Feature cards with icon headers and hover states using component tokens.

Learn more

Horizontal Card

Side-by-side layout for list views

Horizontal Card Layout

A horizontal card layout suitable for list views, featuring an image area and content section with consistent spacing.

Card Tokens

Design token reference for card components

--card-bgvar(--color-card)
--card-bordervar(--color-card-border)
--card-textvar(--color-foreground)
--card-border-radiusvar(--radius-xl)
--card-paddingvar(--spacing-6)
--card-shadowvar(--shadow-sm)
--card-title-font-sizevar(--font-size-body)
--card-title-lg-font-sizevar(--font-size-lead)
--card-subtitle-font-sizevar(--font-size-body-small)