Gib dem äußeren Container c-card, der Bild-Box c-card__media und dem Textbereich c-card__inner. Rahmen, Rundung und Schatten kommen automatisch.
Der Aufbau
Eine Karte ist immer verschachtelt — mindestens zwei Ebenen:
| Ebene | Klasse | Enthält |
|---|---|---|
| Container (außen) | c-card |
alles |
| Container (Bild) | c-card__media |
Bild-Widget |
| Container (Inhalt) | c-card__inner |
Überschrift, Text, Button |
Schritt für Schritt
- Container einfügen, Klasse
c-card. - Darin einen Container, Klasse
c-card__media. Bild-Widget hineinziehen. - Darunter einen zweiten Container, Klasse
c-card__inner l-stack u-gap--xs. Derl-stacksorgt für gleichmäßige Abstände zwischen Überschrift, Text und Button. - Inhalte einfügen: Überschrift
t-heading--m, Textt-text--m, Buttonc-btn--link.
Die drei Karten-Varianten
| Klasse | Wofür |
|---|---|
c-card |
Standard — ruhige Informationskarte |
c-card--interactive |
Die ganze Karte ist klickbar. Hebt sich beim Überfahren leicht an. |
c-card--featured |
Hervorgehoben — farbiger Rahmen. Für das empfohlene Angebot in einer Reihe. |
Bei c-card--interactive muss der Link die ganze Karte umschließen oder der Container selbst verlinkt sein — sonst hebt sie sich an, ist aber nicht klickbar. In Elementor: den Container auswählen und unter Layout → Link das Ziel eintragen.
Warum die innere Bild-Box wichtig ist
Die Karte hat runde Ecken und einen Innenabstand. Ein Bild darin ist rechteckig — ohne c-card__media stehen die Ecken über. Das System rechnet den passenden inneren Radius selbst aus. Details in Das Bild ragt aus der Karte heraus.
Mehrere Karten nebeneinander
Karten in einen Container mit l-cluster u-gap--l legen. Sie stehen dann nebeneinander und brechen auf schmalen Bildschirmen automatisch um.