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.

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.