Karten

Die Komponenten-Referenz listet nur die Klassennamen - hier geht es Schritt für Schritt darum, WIE eine Karte tatsächlich aus diesen Bausteinen zusammengesetzt wird, live nachvollziehbar auf dieser Seite.

1. Grundstruktur

.ncss-card ist bewusst nur Struktur: eine Flex-Column mit overflow: clip, ohne eigene Optik. .ncss-card-body ist der einzige zwingende Baustein - Header/Footer/Media sind optional.

<article class="ncss-card">
  <div class="ncss-card-body">
    <h3>Titel</h3>
    <p>Text ...</p>
  </div>
</article>

Ergebnis (live, dieselben Klassen):

So allein sieht man von der Karte fast nichts - kein Rahmen, keine Rundung, kein Schatten. Das ist Absicht, kein fehlender Schritt: weiter unten kommt die Optik dazu.

2. Optik: Rahmen, Ecken, Schatten

Rahmen/Ecken/Schatten sind bewusst NICHT Teil von .ncss-card selbst - das ist eine gestalterische Entscheidung, keine Karten-Eigenschaft. Stattdessen die allgemeinen Utilities aus helpers/elevation.css, die genauso auf jedem anderen Element funktionieren:

<article class="ncss-card ncss-border ncss-radius-lg ncss-shadow-sm ncss-shadow-hover-md">
  <div class="ncss-card-body">
    <h3>Klassische Karte</h3>
    <p>Rahmen, runde Ecken, dezenter Schatten, wächst beim Hover.</p>
  </div>
</article>

3. Media (Bild/Platzhalter)

.ncss-card-media als ERSTES Kind erzeugt die übliche "Bild oben"-Karte, aspect-ratio per Default --ncss-aspect-video. Ein wichtiger Fallstrick: .ncss-card-media setzt selbst border-radius: 0 und verlässt sich auf overflow: clip der Karte, um automatisch NUR die passenden Ecken zu runden (oben bei dieser Anordnung). Ohne dieses Zurücksetzen würde die Media (kombiniert mit z.B. .ncss-placeholder, das eine eigene Rundung mitbringt) an ALLEN vier Ecken rundlich wirken, auch unten, wo sie an keine Kartenecke stößt.

<article class="ncss-card ncss-border ncss-radius-lg ncss-shadow-sm">
  <div class="ncss-card-media">
    <img src="foto.jpg" alt="...">
  </div>
  <div class="ncss-card-body">
    <h3>Mit Bild</h3>
  </div>
</article>

4. Header & Footer

.ncss-card-header/-footer sind rein optional, mit eigenem Trennrahmen. Das Padding aller drei Bausteine (Header/Body/Footer) skaliert mit der Breite des umgebenden CONTAINERS (cqi-Einheiten), nicht dem Viewport - passend, egal ob die Karte in einer schmalen Sidebar oder einem breiten Grid steckt.

<article class="ncss-card ncss-radius-lg ncss-shadow-lg">
  <div class="ncss-card-header">Kopfzeile</div>
  <div class="ncss-card-body">Inhalt</div>
  <div class="ncss-card-footer">
    <button class="ncss-btn ncss-btn--primary">Aktion</button>
  </div>
</article>

5. Varianten

<article class="ncss-card ncss-card--linked ncss-border ncss-radius-lg ncss-shadow-sm">
  <div class="ncss-card-body">
    <h3><a class="ncss-card-link" href="/artikel">Ganze Karte klickbar</a></h3>
    <p>Weiterer Text, Bilder etc. bleiben normal - nur der Link selbst ist fokussierbar.</p>
  </div>
</article>

6. Horizontal (Media neben Text)

Media LINKS/RECHTS braucht eine eigene Klasse (die Flex-Richtung muss wechseln) UND einen zusätzlichen Wrapper .ncss-card-container, weil ein Element per Spec nicht seinen EIGENEN Container-Query-Kontext abfragen kann - nur Nachfahren können das. Ab 24rem CONTAINER-Breite (nicht Viewport!) springt die Karte automatisch auf Nebeneinander um.

<div class="ncss-card-container">
  <article class="ncss-card ncss-card--horizontal ncss-border ncss-radius-lg">
    <div class="ncss-card-media"><img src="foto.jpg" alt="..."></div>
    <div class="ncss-card-body">
      <h3>Titel</h3>
      <p>Text ...</p>
    </div>
  </article>
</div>

Live - Browserfenster/Panel schmaler ziehen, um den Umbruch bei 24rem zu sehen:

7. Fortgeschritten: Adaptiver Radius für Mobile

Ein häufiges Problem: eine Karte soll auf breiten Bildschirmen schön abgerundet aussehen, geht aber auf Mobile bewusst randlos über die volle Breite (z.B. innerhalb von .ncss-full-bleed oder einfach weil der umgebende Container dort kein Padding mehr hat) - dann wirken die runden Ecken plötzlich falsch, weil die Karte den Bildschirmrand direkt berührt. Statt das per @media-Breakpoint von Hand umzuschalten, gibt es .ncss-radius-adaptive-sm/-md/-lg (helpers/elevation.css): rundet automatisch NUR dann ab, wenn die Karte tatsächlich Außenabstand zum Bildschirmrand hat.

<article class="ncss-card ncss-border ncss-radius-adaptive-lg ncss-shadow-sm">
  ...
</article>

Live - Regler ziehen, um die Box schmaler/breiter zu machen (ein <iframe> spannt seinen EIGENEN Viewport auf, deshalb lässt sich der Effekt hier per Regler testen statt das ganze Browserfenster verkleinern zu müssen):

<article class="ncss-card ncss-border ncss-radius-adaptive-lg ncss-shadow-sm"
         style="width: min(100vw, 20rem);">
  ...
</article>

Das Prinzip (klassischer "Conditional Border Radius"-Trick, siehe tokens.css' --ncss-radius-adaptive-* für die Formel): 100vw (echte Viewport-Breite) wird mit der eigenen 100% (eigene Element-Breite) verglichen - sind beide praktisch gleich groß, kippt der Radius auf 0. Bezieht sich auf den ECHTEN Viewport, nicht auf einen beliebigen Vorfahren-Container - hilft deshalb nicht innerhalb eines schmaleren, selbst scrollenden Unterbereichs, funktioniert aber genau deshalb zuverlässig im <iframe> oben (das vw darin bezieht sich auf die iframe-eigene Breite). Auf einer normalen Seite mit einer Karte, die auf Mobile bewusst randlos werden soll, meist zusammen mit .ncss-full-bleed kombiniert - WICHTIG dabei: .ncss-full-bleed selbst braucht einen bis zum Viewport zentrierten Elternpfad (calc(50% - 50vw)), bricht sonst asymmetrisch aus einem seitlich versetzten Layout wie dieser Doku-Seite (Grid mit Sidebar) heraus - genau deshalb hier ein iframe statt .ncss-full-bleed direkt auf der Seite. Für Komponenten mit eigenem Radius-Escape-Hatch (z.B. .ncss-stack-card's --ncss-stack-radius, siehe demo/stacked-cards.html) direkt var(--ncss-radius-adaptive-lg) als Wert setzen, statt der fertigen Klasse.