Cards

Container components for grouping related content. All cards meet WCAG 2.1 Level AA with proper structure and interaction patterns.

Basic Card

Card Title

This is a basic card with a title and description. Cards are versatile containers for content.

Card with Header

Project Overview

Active

A card with a header section containing a title and status badge.

Card with Footer

Subscription Plan

Your current plan includes unlimited projects and team members.

Interactive Card

Click Me

This entire card is clickable and shows hover/focus states.

→

Another Option

Interactive cards are great for navigation and selection.

→

Card Variants

Bordered Card

A card with a more prominent border style.

Elevated Card

A card with shadow for visual hierarchy.

Stats Card

Total Users12,543+12.5%

Revenue$45,231+8.2%

Bounce Rate23.4%-2.1%

Sessions8,432+5.3%

Card with Image

Featured Article

Cards can include images, making them perfect for media content.

Token Mapping

How tokens flow through the three-layer system: value → primitive → semantic → component.

Background

#18181b66→zinc-900/40→--card→--card-bg

Border

#27272a99→zinc-800/60→--border→--card-border

Hover border

#3f3f46cc→zinc-700/80→--border→--card-hover-border

Title

#e4e4e7→zinc-200→--foreground→--card-title

Body text

#a1a1aa→zinc-400→--muted-foreground→--card-body

Divider

#27272a→zinc-800→--border→--card-divider

PrimitiveSemanticComponent

Accessibility Guidelines

✓

Semantic StructureUse appropriate heading levels within cards.

✓

Interactive CardsClickable cards use anchor or button elements with clear focus states.

✓

Color ContrastCard content meets 4.5:1 contrast ratio against background.