0Pricing
CSS Academy · Lesson

Card Component with CSS Custom Properties

Build a flexible card component driven entirely by CSS custom properties for easy theming.

Design Goals

A card component is a self-contained container for content. Design goals: consistent padding using spacing tokens, themeable colors using alias tokens, responsive sizing without JS, and variant support (elevated, outlined, flat) through CSS custom properties.

Base Card Structure

Use a single .card class with CSS custom properties for configurable values. Internal elements (header, body, footer) inherit from the card's scope. This limits style drift between card instances across the codebase.

.card {
  --card-padding: var(--spacing-4);
  --card-radius: var(--radius-md);
  --card-bg: var(--color-surface);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

All lessons in this course

  1. Card Component with CSS Custom Properties
  2. Modal and Dialog Styling
  3. Dropdown and Popover Patterns
  4. Tab Component with :checked Hack vs JS
← Back to CSS Academy