# SummaryList

Une liste de clé et de valeur : les caractéristiques d'une seule chose, à lire d'un coup et à modifier ce qui est nécessaire.

## Playground

```html
<dl class="feitio-summary-list"><div><dt>Nom</dt><dd>Arroser les plantes</dd></div><div><dt>Quand</dt><dd>Chaque mardi, à 9 h</dd></div><div><dt>Prévenir par</dt><dd>Discord, e-mail</dd></div></dl>
```

## Quand l'utiliser

-   Pour afficher une configuration ou les détails d'un élément : un profil, un calendrier, les paramètres.
-   Sur la page de détail d'un élément, à côté de ses actions.

## Quand ne pas l'utiliser

-   **De nombreux éléments du même type :** Tableau.
-   **Pour tout modifier en une fois :** c'est un formulaire ; la liste sert à lire.

## Exemples

### Détails d'un rappel

Chaque ligne contient la clé, la valeur et "Changer", qui mène à la modification de cette seule ligne. Sur mobile, les trois s'empilent.

Afficher le code

```html
<dl class="feitio-summary-list">
  <div>
    <dt>Quando</dt>
    <dd>Toda terça, às 9h</dd>
    <dd class="change"><a class="feitio-link" href="/lembretes/1/quando">Alterar<span class="feitio-visually-hidden"> quando</span></a></dd>
  </div>
</dl>
```

## Anatomie

1.  **Clé :** le nom de la caractéristique, en gras.
2.  **Valeur :** ce qu'elle est actuellement.
3.  **Modifier**, optionnel : modifie uniquement cette ligne.

## Faire et ne pas faire

Do

Zone horaire

São Paulo (UTC−3)

Langue

Portugais

Une chose, plusieurs caractéristiques : lisez du haut vers le bas.

Don’t

Zone horaire

Langue

São Paulo (UTC−3)

Portugais

Un tableau à une ligne : un en-tête pour un élément, et il ne tient pas sur mobile.

## Écriture

-   Clé : le nom court, identique à l'étiquette du champ qui le modifie.
-   Valeur vide : indique-le (« Non défini »), jamais vide.
-   "Modifier" avec le nom de la ligne caché pour les lecteurs d'écran.

## Accessibilité

-   Il s'agit d'une liste de définitions (`<dl>`) : les lecteurs d'écran lisent la clé et la valeur par paires.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-summary-list"`

sur le `<dl>`

Clé, valeur et modification en colonnes, avec des lignes fines.

`class="change"`

sur le `<dd>` du lien

"Changer" sur la droite ; sur mobile, en dessous.