Card

Zusammengesetzte Struktur: .card mit optionalen Bereichen .card-header, .card-content und .card-footer — jeder Bereich einzeln weglassbar.

Vollständige Struktur

<div class="card" style="max-inline-size: 30rem">
  <div class="card-header">
    <h3 class="card-header-title">Kartentitel</h3>
  </div>
  <div class="card-content">
    Beliebiger Inhalt. Die Card bringt Hintergrund, Rahmen, Radius und Schatten mit.
  </div>
  <div class="card-footer">
    <button class="button is-primary card-footer-item">Speichern</button>
    <button class="button card-footer-item">Abbrechen</button>
  </div>
</div>

Nur Inhalt

<div class="card" style="max-inline-size: 30rem">
  <div class="card-content">Eine Card braucht nur den Bereich, den du wirklich verwendest.</div>
</div>

Responsiv per Container

Die Card reagiert auf ihre eigene Breite, nicht auf den Viewport: Unter 24rem stapeln sich die Footer-Aktionen automatisch — egal, wo die Card eingebaut ist.

<div class="card" style="max-inline-size: 18rem">
  <div class="card-content">Schmale Card — die Footer-Buttons stapeln sich.</div>
  <div class="card-footer">
    <button class="button is-primary card-footer-item">Speichern</button>
    <button class="button card-footer-item">Abbrechen</button>
  </div>
</div>

Anpassen

Component-Variablen: --card-bg, --card-border, --card-radius, --card-pad.