Roosevelt Docs
Roosevelt Docs
Welkom
Architecture
Workflows
Infrastructure
AI & Automation
API Reference
Design System
Design System

Foundations

Design TokensTypographyColorsSpacingMotion

Components

ComponentsButtonCardBadgeInputNavigation

Patterns

LayoutFormsFeedback

Guidelines

AccessibilityDark ModeFigma Handoff
Guides
Design System

Card

Card component met varianten en interactie states

Card

Cards groeperen gerelateerde content. Twee varianten: Default en Interactive.

Default Card

<div class="rounded-m border border-outline bg-surface-primary p-6
            shadow-low">
  <h3 class="text-title font-semibold text-label-primary">Card Titel</h3>
  <p class="mt-2 text-body text-label-secondary">Beschrijving tekst.</p>
</div>

Interactive Card

<a href="/detail" class="block rounded-m border border-outline
                         bg-surface-primary p-6 shadow-low
                         transition-all duration-150
                         hover:border-outline-strong hover:shadow-md">
  <h3 class="text-title font-semibold text-label-primary">Klikbare Card</h3>
  <p class="mt-2 text-body text-label-secondary">Met hover effect.</p>
</a>

Anatomy

  1. Container — rounded-m, border-outline, shadow-low, bg-surface-primary
  2. Padding — p-6 (24px) standaard
  3. Titel — text-title, font-semibold, text-label-primary
  4. Beschrijving — text-body, text-label-secondary, mt-2
  5. Footer (optioneel) — mt-4, pt-4, border-t border-outline

Token Mapping

PropertyToken
Background--color-bg-primary
Border--color-outline-default
Border radius--radius-m
Shadow--shadow-low → --shadow-md (hover)
Padding--space-12 (24px)
Transition--transition-fast

Accessibility

  • Interactive cards: gebruik <a> of <button>, nooit <div> met onClick
  • Focus state: focus-visible:ring-2 focus-visible:ring-outline-active

Previous

Button

Next

Badge

On this page

CardDefault CardInteractive CardAnatomyToken MappingAccessibility