1. Docs
2. Komponenten
3. Karte

Karte 1.2.0

A flexible content container with .velin-card. Includes header, body, footer, image cap, flat variant, clickable state, and responsive horizontal layout. English: Card

Wann verwenden

• Gruppierte Inhaltsbloecke mit Header, Body und optionalem Footer/Medienbereich mit .velin-card.
• Produkttiles, Zusammenfassungspanels oder Listenelemente, die einen klaren visuellen Container ohne Overlay-Verhalten brauchen.

Wann nicht verwenden

• Modal or sheet overlays — use Modal, Dialog, or Sheet.
• Simple inline status text — use Alerts or plain typography instead of wrapping everything in a card.

Einfaches Beispiel

Vorschau HTML

Kartentitel

Kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Inhalt bildet.

Aktion

Kopieren

<div class="velin-card">
  <img class="velin-card__image" src="photo.jpg" alt="…">
  <div class="velin-card__body">
    <h3 class="velin-card__title">Card title</h3>
    <p class="velin-card__text">Some quick example text…</p>
  </div>
  <div class="velin-card__footer">
    <button class="velin-btn velin-btn--primary velin-btn--sm">Action</button>
  </div>
</div>

Varianten

<!-- Flat (no shadow) -->
<div class="velin-card velin-card--flat">…</div>

<!-- Clickable -->
<div class="velin-card velin-card--clickable" tabindex="0">…</div>

<!-- Horizontal (uses container query, min-width: 30rem) -->
<div class="velin-card velin-card--horizontal">
  <img class="velin-card__image" src="photo.jpg" alt="…">
  <div class="velin-card__body">…</div>
</div>

Barrierefreiheit

• Verwende semantische Ueberschriften innerhalb von .velin-card__title.
• Fuege alt-Text zu .velin-card__image hinzu.
• Klickbar cards should have tabindex="0" and a keyboard handler or use an <a> wrapper.

CSS-Variablen

Verwandt

• List Group
• Stat
• Badge