# Link

Ein Link führt Sie irgendwohin: eine andere Seite, ein anderer Teil derselben Seite, eine andere Website.

## Playground

```html
<a class="feitio-link" href="#playground">den Novemberbericht</a>
```

## Wann verwenden

-   Zum Navigieren immer, auch wenn es wie eine Aktion aussieht („Alle anzeigen").
-   Innerhalb des Textes oder auf einer eigenen Zeile.

## Wann nicht verwenden

-   **Etwas zum Geschehen bringen** (Speichern, Löschen, Senden): verwenden Sie Button.
-   **Für eine prominente Tür** zu einem anderen Bereich: verwenden Sie LinkCard.

## Beispiele

### Gleicher Tab

Standardmäßig: der Link bringt Sie dorthin, und die Rückwärts-Taste bringt Sie zurück.

Code anzeigen

```html
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>
```

### Neuer Tab

Die Ausnahme, nur wenn das Verlassen der Seite dazu führt, dass jemand etwas verliert, wie ein halb ausgefülltes Formular. Immer mit dem Icon und dem versteckten Hinweis.

Code anzeigen

```html
<a class="feitio-link" href="/ajuda/horarios" target="_blank" rel="noopener">
  o guia de horários<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-new-tab"/></svg>
  <span class="feitio-visually-hidden"> (abre em nova aba)</span>
</a>
```

## Das Icon bedeutet neuen Tab

In Feitio bedeutet ein Icon auf einem Link nur eine Sache: es öffnet einen anderen Tab. Ein Link zu einer anderen Seite, der im gleichen Tab geöffnet wird, erhält kein Icon.

## States

-   **Immer unterstrichen.** Die Farbe reicht nicht aus.
-   **Hovern:** die Unterstreichung verdickt sich.
-   **Fokus:** der orangen Rahmen.

## Do and don't

Do

Siehe den [November-Backup-Bericht](#padroes).

Der Linktext sagt, wohin er führt, auch wenn man ihn aus dem Kontext liest.

Don’t

Um den Bericht anzusehen, [klicken Sie hier](#padroes).

"Klicken Sie hier" sagt niemandem, der die Liste der Links durch eine Screenreader-Liste durchliest, nichts.

Do

[Siehe das Feitio-Showcase](#padroes)

Eine andere Seite im selben Tab: kein Icon.

Don’t

[See the Feitio showcase](#padroes)

Das Icon verspricht einen neuen Tab, der nie öffnet: Menschen lernen, ihm nicht zu vertrauen.

## Schreiben

-   Der Linktext ist das Ziel: "Backup-Bericht", nicht "hier", "mehr erfahren" oder die rohe Adresse.
-   Das Icon sitzt ganz am Ende des Textes, innerhalb des Links.

## Barrierefreiheit

-   Neuer Tab immer mit dem versteckten Text "(in einem neuen Tab öffnen)"; das Icon ist `aria-hidden`.
-   `target="_blank"` immer mit `rel="noopener"`. In React, wenn man nach einem neuen Tab fragt, werden alle drei zusammengeführt.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-link"`

erforderlich

Text orange, always underlined.

`href`

URL

The destination.

`target="_blank"`

nur als Ausnahme

Öffnet ein neues Tab; immer mit dem Icon, dem versteckten Text und dem `rel`.

`rel="noopener"`

mit target="\_blank"

Die Sicherheit des neuen Tabs.