LinkCard

Ein Tor zu einem anderen Bereich: ein Titel, ein Satz und der Pfeil. Die ganze Karte ist der Link.

Auf dieser Seite

Playground

DesignDas Konzept, die Grundlagen und die Muster.

Text

Hintergrund

HTML

<div style="inline-size: min(100%, 22rem)"><a class="feitio-link-card" href="#playground"><strong>Design<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></strong><span>Das Konzept, die Grundlagen und die Muster.</span></a></div>

Wann verwenden

Um ein paar mögliche Pfade nebeneinander darzustellen: Bereiche einer Website, die beiden Pfade einer Getting-Started-Seite.

Wann nicht verwenden

Für eine Liste von Elementen (Pläne, Aufgaben): verwenden Sie Table oder TaskList.
Für eine Aktion: verwenden Sie Button.
Für mehr als sechs Türen: es wird zu einem Raster identischer Karten; verwenden Sie eine Liste von Links.

Beispiele

DesignThe why behind every choice.ComponentsEvery piece, with its code.

Türen nebeneinander

In einem Raster jede Karte mit Titel, Satz und Pfeil. Beim Überfahren hebt das Papier auf.

Code anzeigen

HTML

<div class="feitio-grid" data-gap="4" style="--feitio-grid-min: 12rem">
  <a class="feitio-link-card" href="/design">
    <strong>Design<svg class="feitio-icon" aria-hidden="true">…</svg></strong>
    <span>O porquê de cada escolha.</span>
  </a>
  …
</div>

Anatomie

DesignThe why behind every choice.

Karte: der ganze Link, auf dem Papier; er hebt sich beim Überfahren.
Titel: das Ziel, in einem oder zwei Wörtern.
Pfeil: sagt, dass es irgendwohin geht.
Satz: was auf der anderen Seite ist.

States

Überfahren: wird zum gehobenen Papier mit dem harten Schatten.
Fokus: die orangefarbene Umrandung um die ganze Karte.

Do and don't

Get startedFrom zero to a page in a few steps.

Ein Titel, der das Ziel ist, und ein Satz, was dort ist.

Don’t

Learn moreRead

"Mehr erfahren" sagt nicht das Ziel, und ein Link innerhalb der Link-Karte verwirrt den Klick.

Die ganze Karte ist eine einzelne <a>: nichts darin ist klickbar.
Der Titel kommt zuerst im Code, also lesen Screenreader das Ziel vor dem Satz.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-link-card"`	auf dem `<a>`	Karte mit Link und heben Papier.
`<strong>`	der Titel, mit der Pfeil	Zielort, in einem oder zwei Wörtern.
`<span>`	der Satz	Was auf der anderen Seite ist.