# Link

Un lien vous emmène quelque part ailleurs : une autre page, une autre partie de la même page, un autre site.

## Playground

```html
<a class="feitio-link" href="#playground">le rapport de novembre</a>
```

## Quand l'utiliser

-   Pour naviguer, toujours, même quand cela ressemble à une action (« Voir tout »).
-   Dans le texte ou sur sa propre ligne.

## Quand ne pas l'utiliser

-   **Pour faire quelque chose arriver** (sauvegarder, supprimer, envoyer) : utilisez Button.
-   **Pour une porte en vue** vers un autre espace : utilisez LinkCard.

## Exemples

### Même onglet

Par défaut : le lien vous y emmène, et le bouton retour vous ramène.

Afficher le code

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

### Nouvel onglet

L'exception, uniquement lorsque quitter la page ferait perdre à la personne quelque chose, comme un formulaire partiellement rempli. Toujours avec l'icône et l'avertissement caché.

Afficher le code

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

## L'icône signifie nouvel onglet

Dans Feitio, une icône sur un lien ne signifie qu'une seule chose : il ouvre un autre onglet. Un lien vers un autre site qui s'ouvre dans le même onglet n'a pas d'icône.

## États

-   **Toujours souligné.** La couleur ne suffit pas.
-   **Survol :** le soulignement s'épaissit.
-   **Focus:** le contour orange.

## Faire et ne pas faire

Do

Voir le [rapport de sauvegarde de novembre](#padroes).

Le texte du lien indique où il mène, même lu hors contexte.

Don’t

Pour voir le rapport, [clicquer ici](#padroes).

"Clicquer ici" ne dit rien à quelqu'un parcourant la liste des liens de l'accessibilité.

Do

[Voir le showcase Feitio](#padroes)

Un autre site, dans l'onglet actuel : pas d'icône.

Don’t

[See the Feitio showcase](#padroes)

L'icône promet un nouvel onglet qui ne s'ouvre jamais : les gens apprennent à ne pas lui faire confiance.

## Écriture

-   Le texte du lien est la destination : "rapport de sauvegarde", pas "ici", "en savoir plus" ou l'adresse brute.
-   L'icône se trouve tout à la fin du texte, à l'intérieur du lien.

## Accessibilité

-   Nouvel onglet toujours avec le texte caché "(s'ouvre dans un nouvel onglet)"; l'icône est `aria-hidden`.
-   `target="_blank"` toujours avec `rel="noopener"`. En React, demander un nouvel onglet ajoute les trois ensemble.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-link"`

obligatoire

Text orange, always underlined.

`href`

URL

The destination.

`target="_blank"`

only as the exception

Opens a new tab; always with the icon, the hidden text and the `rel`.

`rel="noopener"`

with target="\_blank"

The new tab’s safety.