Card
Klickbare Inhaltskarte mit dem "Clickable Card Pattern": Der gesamte Kartenbereich ist anklickbar, aber nur der Titel-Link ist für Screen-Reader sichtbar. Semantisch als <article> mit optionalem <figure>.
Mit Bild und Link
Der häufigste Anwendungsfall: Karten mit Vorschaubild, die zu einer Detailseite führen. Beim Hover-Effekt zoomt das Bild leicht und ein Schatten erscheint.
Standard Cards
<Card
title="Oekostrom für Privathaushalte"
href="/tarife/oekostrom"
tag="Beliebt"
image="/images/solar.jpg"
imageAlt="Solarpanele auf einem Hausdach"
description="100% erneuerbare Energie aus der Region."
/>Mit Bild
Karten mit Vorschaubild im aspect-video Format (16:9). Beim Hover zoomt das Bild leicht. Ideal für Blogbeiträge, Produkte oder Dienstleistungen.
Cards mit Bild
Photovoltaik-Anlage
Eigenen Strom erzeugen und bis zu 70% Energiekosten sparen. Inklusive Speicher und Montage.
Glasfaser-Internet
Highspeed bis 1 Gbit/s für Ihr Zuhause. Ohne Drosselung, mit kostenlosem Router.
Energieberatung
Unsere Experten analysieren Ihren Verbrauch und zeigen Sparpotenziale auf.
<Card
title="Oekostrom für Privathaushalte"
href="/tarife/oekostrom"
tag="Beliebt"
image="/images/solar.jpg"
imageAlt="Solarpanele auf einem Hausdach"
description="100% erneuerbare Energie aus der Region."
/>Mit Bild (2 Spalten)
Groessere Cards in 2-Spalten-Layout für prominentere Inhalte.
Große Cards
Waermeversorgung der Zukunft
Bis 2028 stellen wir die Fernwärme in Musterstadt komplett auf erneuerbare Quellen um. Das größte Infrastrukturprojekt der Stadtgeschichte.
Smart Meter für alle Haushalte
Intelligente Zähler machen Ihren Verbrauch transparent. Per App sehen Sie in Echtzeit, wo Energie fließt — und wo Sie sparen können.
<div class="auto-grid" data-cols="2">
<Card title="..." image="..." href="#" />
</div>Ohne Link (nicht klickbar)
Cards ohne href haben keinen Hover-Effekt und sind reine Informationscontainer. Nützlich für Feature-Listen oder Statistiken.
Reine Info-Cards
120.000+ Kunden
Haushalte und Unternehmen vertrauen auf unsere zuverlässige Versorgung seit über 70 Jahren.
24/7 Stoerungshotline
Bei Problemen sind wir rund um die Uhr erreichbar. Kostenfreie Rufnummer: 0800 123 456.
100% Oekostrom
Unser gesamter Strommix stammt aus erneuerbaren Quellen. Zertifiziert vom TUeV Rheinland.
<Card title="24/7 Erreichbar">
<p>Unser Kundenservice ist rund um die Uhr für Sie da.</p>
</Card>Redakteur-Hinweise
Empfehlungen für die Content-Pflege, damit Cards konsistent und ansprechend wirken.
| Element | Empfehlung | Beispiel |
|---|---|---|
| Titel | 3–8 Wörter, maximal 2 Zeilen. Konkret und handlungsorientiert. | ✔ „Oekostrom für Privathaushalte“ ✘ „Informationen zu unserem neuen Stromangebot“ |
| Beschreibung | 1–2 Sätze, max. 120 Zeichen. Den Nutzen beschreiben, nicht das Feature. | ✔ „Bis zu 70% Energiekosten sparen.“ ✘ „Klicken Sie hier für mehr Infos.“ |
| Tag | 1 Wort, max. 12 Zeichen. Nur wenn es echten Mehrwert bietet. | „Neu“, „Beliebt“, „Aktion“ |
| Bild | Format 16:9, min. 600×340px. Helle, kontrastreiche Motive. Kein Text im Bild. | Fotos von Produkten, Situationen, Ergebnissen |
| Alt-Text | Beschreibt was man sieht, nicht was gemeint ist. 5–15 Wörter. | ✔ „Solarpanele auf einem roten Ziegeldach“ ✘ „Bild“ |
| Anzahl | 3er- oder 2er-Gruppen. Gleichmäßige Textlängen innerhalb einer Gruppe. | Alle Cards in einer Reihe sollten ähnlich lang sein. |
Installation
cp-components add card