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.

Sur cette page

Playground

Nom: Arroser les plantes
Quand: Chaque mardi, à 9 h
Prévenir par: Discord, e-mail

Modifier

Fond

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

Nom: Arroser les plantes; Changer
Lorsque: Tuède, 9 heures; Changer
Aviser par: Discord, e-mail; Changer

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

Lorsque: Tuède, 9 heures; Changer

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

Faire et ne pas faire

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.

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.