Karte erstellen

Übersicht

Eine Karte gruppiert einen zusammengehörigen Inhalt oder eine Auswahl. Es handelt sich um ein visuelles Muster, nicht um ein festes semantisches oder Interaktionsmodell. Behalten Sie daher die Bedeutung des Inhalts bei und verwenden Sie die native Interaktion, die dem Zweck entspricht.

Richtlinien

Wählen Sie die Semantik für den Inhalt und die Interaktion separat aus:

• <article> als Kartenstamm verwenden, unabhängig davon, ob ein Link zu einem Ziel vorhanden ist;
• Verwenden Sie für die Navigation einen nativen Link. Wenn die gesamte Karte ein Ziel ist, darf ein einzelner Link nur dann um das <article>-Element gelegt werden, wenn die Karte keine anderen interaktiven Elemente (a, button, input, select, textarea) enthält.
• Links und Schaltflächen für unabhängige Aktionen als separate native Steuerelemente beibehalten;
• Verwenden Sie ein Optionsfeld oder ein Kästchen mit einem zugehörigen <label> oder ein option in einem nativen <select>, wenn die Karte eine Auswahl ist.

Medien, Titel, unterstützende Inhalte und Aktionen sollten in einer sinnvollen Reihenfolge im Quellcode angeordnet sein. Verwenden Sie kein CSS-order, um dem zu widersprechen (siehe CSS-Layouts und responsives Design).

Implementierung

Halten Sie das Markup minimal und lassen Sie CSS-Selektoren jede Region erkennen, damit einfache Karten einfach bleiben und komplexere Karten möglich sind. Eine Karte hat bis zu vier Bereiche in dieser Quellreihenfolge. Jeder davon kann weggelassen werden. Regionen sind direkte untergeordnete Elemente der Karte und nicht in Wrapper-Elementen wie .card__body gruppiert. Dadurch wird verhindert, dass Regionen per Selektor platziert und formatiert werden. Eine Region mit einem einzelnen Element ist dieses Element selbst, nicht umschlossen: Ein einzelner Absatz ist das <p>. Verwenden Sie einen Wrapper nur, wenn ein Bereich mehrere Elemente enthält.

• Medien: ein <img>, <picture>, <video> oder <svg> als erstes untergeordnetes Element. Fügen Sie die Klasse .media nur beliebigen Hero-Inhalten hinzu, die nicht zu diesen Elementen gehören, und verpacken Sie ein einfaches <img>-Element niemals in ein .media-Element.
• Header: Eine Überschrift, die allein steht. Verwenden Sie <hgroup> nur, wenn die Überschrift einen Untertitel oder Slogan hat, und <header>, wenn der Bereich mehr als einen Titel enthält, z. B. eine Verfasserzeile oder ein Logo. Wenn die Karte ein primäres Ziel hat, wird der Link in die Überschrift eingefügt.
• Inhalt: Ein einzelnes <p>, <ul> oder <dl> steht für sich allein. Wenn der Inhalt aus mehreren Elementen besteht, z. B. mehreren Absätzen oder einem Absatz und einer Liste, gruppieren Sie sie in einem <div>, damit der Bereich ein einzelnes Rasterelement ist.
• Fußzeile: Ein <footer> mit unabhängigen Aktionen als native Links und Schaltflächen. Ein „Mehr erfahren“-Link kann die URL des Überschriftenlinks haben, sollte aber einen beschreibenden barrierefreien Namen erhalten, der mit dem sichtbaren Text beginnt und visuell ausgeblendeten Text verwendet (z. B. Read more<span> about poached eggs</span>), da identische „Mehr erfahren“-Links in der Linkliste eines Screenreaders mehrdeutig sind. Fügen Sie keine weiteren Links in der Fußzeile hinzu, die die URL der Überschrift wiederholen.

Die einfachste Karte ist ein <article> mit einer Überschrift und einem Absatz. Wählen Sie das Link- und Aktionsmuster aus, das dem Verhalten der Karte entspricht. Weitere Informationen finden Sie unter Interaktionsmodelle.

Wenn Sie Kartenbilder oder ‑videos verwenden, die einen Bereich mit festem Seitenverhältnis ausfüllen sollen, legen Sie aspect-ratio und object-fit: cover für das <img>- oder <video>-Element selbst fest, damit es den Bereich ohne Verzerrung ausfüllt (es kann zu einem Zuschneiden kommen). Verwenden Sie den aspect-ratio eines .media-Containers nur für andere Hero-Inhalte. Andernfalls sollte das ursprüngliche Seitenverhältnis des Mediums beibehalten werden. Geben Sie für informative Bilder eine geeignete Textalternative an. Verwenden Sie für dekorative Bilder alt="".

An den verfügbaren Platz anpassen

Das Layout sollte auf dem verfügbaren Platz der Karte basieren, nicht auf dem Darstellungsbereich. Wenn Sie die untergeordneten Elemente der Karte (Medien, Text, Aktionen) anpassen möchten, legen Sie die Karte als Größencontainer (container-type: inline-size) fest und schreiben Sie @container-Regeln für die untergeordneten Elemente. Vermeiden Sie die Größenanpassung über das übergeordnete Raster- oder Listenelement: Die tatsächliche Breite der Karte kann von der Spaltenanzahl, den Abständen usw. abhängen, was zu ungenauen Breakpoints führt.

In einem schmalen Container werden die Regionen in der Reihenfolge der Quelle gestapelt. In einem breiten Container platzieren Sie die Medien in einer Seitenspalte neben den anderen Bereichen, aber nur für Karten mit Medien. Beschränken Sie diese Regeln mit :has() auf das untergeordnete Medienelement (z. B. .card:has(> img)), damit die Spaltendefinitionen und grid-column-Platzierungen nie auf eine Karte ohne Medien angewendet werden. Eine Karte ohne Medien bleibt bei jeder Breite einspaltig und darf keine leere Medienspalte reservieren.

Karten in einem Raster ausrichten

Wenn Karten in einer Zeile die Höhe ihrer Bereiche teilen sollen, verwenden Sie subgrid: Jede Karte sollte sich über vier gemeinsame Zeilenbereiche erstrecken (Medien, Header, Inhalt, Footer). Platzieren Sie die Bereiche nach Elementauswahl und behandeln Sie alles, was keine Medien, keine Überschrift oder kein <footer> ist, als Inhalt. Wenn eine Region auf einer Karte weggelassen wird, bleibt der entsprechende Bereich leer, sodass die verbleibenden Regionen weiterhin mit den benachbarten Karten übereinstimmen. Jeder Track enthält ein Rasterelement. Verpacken Sie den Inhaltsbereich also nur dann in ein <div>, wenn er mehr als ein Element enthält und sich Karten Tracks teilen. Karten, die nicht an gleichgeordneten Elementen ausgerichtet sind, benötigen weder Wrapper noch Subgrid.

Interaktionsmodelle

Content Cards

Verwenden Sie ein <article> als Stamm der Karte. Links und Schaltflächen sollten separate native Steuerelemente bleiben.

Karten mit einem Ziel

Wenn die gesamte Karte ein Ziel ist und keine unabhängigen Aktionen enthält, verwenden Sie einen nativen Link. Der Link kann den <article> umschließen. Verschachteln Sie keine anderen Links, Schaltflächen oder Formularsteuerelemente im Link und verwenden Sie für den Text „Mehr lesen“ ein einfaches <p> oder <span>. Da der barrierefreie Name des Links der gesamte Text der Karte ist, sollten Sie den Inhalt kurz halten. Wenn die Karte viel Text oder andere Aktionen enthält, verwenden Sie das unten stehende Muster für gestreckte Links, damit nur die Überschrift der Link ist:

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

Anklickbare Karten mit unabhängigen Aktionen

Wenn durch Klicken auf die Karte eine Aktion ausgelöst wird, anstatt dass der Nutzer weitergeleitet wird, verwenden Sie ein <button> anstelle eines Links.

Wenn eine Inhaltskarte auf ein primäres Ziel verweist, andere interaktive Elemente enthält und als Ganzes anklickbar sein muss:

• Verwenden Sie ein einzelnes Opt-in für den primären Link selbst: Fügen Sie .card-link genau einem Link pro Karte hinzu (dem Überschriftenlink). Fußzeilen und andere Links erhalten es nie, da sonst jedes Element ein eigenes Overlay hätte und das letzte die gesamte Karte einnehmen würde.
• Verknüpfen Sie den Titel und dehnen Sie den Trefferbereich des Mauszeigers mit ::after über die Karte aus.

.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

• Heben Sie interaktive Elemente mit position: relative; z-index: 1 hervor, damit sie bedienbar bleiben. Sprechen Sie Elementtypen (z.B. a, button) an, anstatt die Aktivierung über Klassen zu verlangen.
• Wenden Sie z-index NICHT auf ganze Container an, da diese sonst Zeigerereignisse erfassen, die keine Aktion auslösen.

.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}

• Gestalten Sie die Karte selbst beim Bewegen des Mauszeigers/Fokussieren, nicht den gestreckten Link:

.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

Auswahlkarten

Verwenden Sie für Karten, die vordefinierte Auswahlmöglichkeiten darstellen, <label class="card"> mit einem Kästchen oder Optionsfeld als direktes untergeordnetes Element.

Die ausgewählte Karte mit :has(:checked) formatieren. Ändern Sie bei der Auswahl niemals Eigenschaften, die sich auf das Layout auswirken, wie border-width, padding oder font-weight, da die Karte und ihre Nachbarn sonst springen. Heben Sie die Auswahl stattdessen mit outline, box-shadow oder einem transparenten Rahmen hervor, der nur die Farbe ändert:

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

Das sichtbare Kästchen oder Optionsfeld ist selbst ein nicht farblicher Indikator für die Auswahl, sodass die Farbänderung allein ausreicht. Wenn das Steuerelement visuell ausgeblendet ist (es muss fokussierbar und im Baum für Barrierefreiheit im Internet bleiben, niemals display: none), fügen Sie einen nicht farbigen Indikator hinzu, der das Layout nicht beeinflusst, z. B. ein Häkchensymbol oder einen dickeren outline.

Wenn Auswahlmöglichkeiten in eine Drop-down-Auswahl gehören, deren Optionen als Karten angeordnet sind, verwenden Sie ein natives <select> mit appearance: base-select und gestalten Sie ::picker(select)- und <option>-Elemente, anstatt die Auswahl durch <div>-Karten zu ersetzen. Weitere Informationen und Fallbacks finden Sie unter Benutzerdefinierte Layouts für die Auswahl.