Roosevelt Docs
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