Card, Feature Grid und Stat Card
Ziel: Eine Card richtig bauen und wissen, welchen der drei kartenartigen Blöcke Sie eigentlich wollen.
Dauer: 5 Minuten
Sie brauchen: Eine Seite, idealerweise mit einem Grid für die Cards
Schritte
- Wählen Sie Add Block, dann Card, und geben Sie ihr einen Name und einen Card style.
- Eine Card allein rendert nichts. Wählen Sie in der Zeile der Card Add child block und fügen Sie Card Header, Card Body und Card Footer hinzu. Diese Regionen haben keine eigenen Felder — sie sind Container.
- Füllen Sie jede Region mit Inhalt: einen Header in die Kopfregion, einen Plain Text in den Körper, einen Button Link in die Fußregion.
- Für eine Reihe kurzer Leistungsaussagen wählen Sie Add Block und dann Feature Grid und fügen Feature Item-Kinder hinzu.
- Für eine Zahl, die es zu zeigen lohnt, nehmen Sie Stat Card: Value ist die Zahl, Eyebrow / Label die kleine Zeile darüber, Description der Satz darunter.
Welcher davon?
- Card — die Einheit braucht echten Inhalt: eine Überschrift, einen Absatz, ein Bild, eine Aktion. Sie komponieren sie.
- Feature Grid — drei bis sechs kurze „das machen wir“-Aussagen, einheitlich, ohne jede einzeln zu komponieren.
- Stat Card — der Inhalt ist eine Zahl. Ein Wert, eine Beschriftung, ein Satz.
Hinweise
- Card-Regionen erscheinen nicht in der obersten Blockauswahl. Es gibt sie nur innerhalb einer Card, weshalb Add child block in der Card-Zeile der einzige Weg hinein ist.
- Sie brauchen nicht alle drei Regionen. Eine Card nur mit Körper ist in Ordnung; eine Card ohne alles ist unsichtbar.
- Cards in Cards verschachteln sich nicht sinnvoll. Wollen Sie ein Kartenraster, setzen Sie Cards in ein Grid.
- Feature Grid ist der schnellere und der unflexiblere Weg. Sobald Sie dagegen ankämpfen, wollten Sie Cards.
- Halten Sie die Kartentexte ähnlich lang. Eine Card mit drei Sätzen neben zwei mit fünf Wörtern wirkt kaputt, auch wenn sie es nicht ist.
Die gesamte Card anklickbar machen
<p>Setzen Sie das Linkziel der Card, wenn die gesamte Fläche ein Ziel öffnen soll. Der Renderer hält verschachtelte Bedienelemente nutzbar und vermeidet ungültige verschachtelte Links. Nutzen Sie Button Link im Footer für eine eigene Beschriftung oder mehrere Ziele.</p>