# LinkCard

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

## Playground

```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

### 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

1.  **Karte:** der ganze Link, auf dem Papier; er hebt sich beim Überfahren.
2.  **Titel:** das Ziel, in einem oder zwei Wörtern.
3.  **Pfeil:** sagt, dass es irgendwohin geht.
4.  **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

Do

[**Get started**From zero to a page in a few steps.](#padroes)

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

Don’t

[**Learn more**Read](#padroes)

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

## Barrierefreiheit

-   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.