Gib dem Container, in dem das Bild liegt, die Klasse c-card__media — geschrieben mit zwei Unterstrichen. Die Rundung passt sich dann automatisch an die Karte an.
Warum das passiert
Eine Karte hat runde Ecken und einen Innenabstand. Ein Bild darin ist standardmäßig rechteckig — die Ecken stehen über und wirken unsauber. Das Design System rechnet die passende innere Rundung aus, aber nur, wenn der Bild-Container die richtige Klasse trägt.
Der richtige Aufbau
Eine Karte besteht aus drei Ebenen:
- Äußerer Container — die Karte selbst:
c-card - Bild-Container — der Kasten um das Bild:
c-card__media - Inhalt — Überschrift, Text, Button mit ihren üblichen Klassen
Wichtig: c-card__media gehört an den Container um das Bild, nicht an das Bild-Widget selbst.
Schreibweise prüfen
| Falsch | Richtig | Fehler |
|---|---|---|
c-card_media |
c-card__media |
nur ein Unterstrich |
c-card--media |
c-card__media |
Bindestriche statt Unterstriche |
c-card__media-box |
c-card__media |
alter Name aus einer frühen Dokumentfassung |
Merkhilfe: zwei Unterstriche bedeuten „Teil von“ — c-card__media ist ein Teil der Karte. Zwei Bindestriche bedeuten „Variante von“ — c-card--featured ist eine besondere Karte.
Inhalts-Box
Fasst du den Textbereich in einen eigenen Container mit farbigem Hintergrund, braucht auch dieser eine passende Rundung. Dafür gibt es c-card__inner.
Wenn es weiterhin nicht passt
- Eigene Rundung im Stil-Reiter? Ein manuell eingetragener Rahmenradius am Bild oder Container überschreibt die Rechnung. Zurücksetzen.
- Falsche Ebene? Im Navigator prüfen, ob die Klasse wirklich am Container und nicht am Bild-Widget hängt.
- Cache? Werkzeuge → CSS-Datei neu erzeugen, dann hart neu laden.