# SummaryList

Eine Schlüssel- und Werteliste: die Eigenschaften einer einzelnen Sache, um auf einen Blick zu lesen und das Notwendige zu ändern.

## Playground

```html
<dl class="feitio-summary-list"><div><dt>Name</dt><dd>Pflanzen gießen</dd></div><div><dt>Wann</dt><dd>Jeden Dienstag, 9 Uhr</dd></div><div><dt>Benachrichtigen per</dt><dd>Discord, e-mail</dd></div></dl>
```

## Wann verwenden

-   Um eine Konfiguration oder Details eines Artikels anzuzeigen: ein Profil, ein Zeitplan, die Einstellungen.
-   Auf der Detailseite eines Elements, neben den Aktionen.

## Wann nicht verwenden

-   **Viele Elemente desselben Typs:** Tabelle.
-   **Alles auf einmal bearbeiten:** das ist ein Formular; die Liste dient zum Lesen.

## Beispiele

### Details einer Erinnerung

Jede Zeile enthält Schlüssel, Wert und „Ändern", das zum Bearbeiten nur dieser Zeile führt. Auf dem Handy stapeln sich alle drei übereinander.

Code anzeigen

```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.  **Schlüssel:** der Name der Eigenschaft, fett gedruckt.
2.  **Wert:** wie es aktuell ist.
3.  **Änderung**, optional: bearbeitet nur diese Zeile.

## Do and don't

Do

Zeitzone

São Paulo (UTC−3)

Sprache

Portugiesisch

Eine Sache, mehrere Merkmale: von oben nach unten lesen.

Don’t

Zeitzone

Sprache

São Paulo (UTC−3)

Portugiesisch

Eine Einzeiler-Tabelle: ein Header für einen Artikel, der auf dem Handy nicht passt.

## Schreiben

-   Schlüssel: der kurze Name, identisch mit dem Label des Feldes, das ihn bearbeitet.
-   Leerer Wert: so sagen ("Nicht festgelegt"), nie leer lassen.
-   "Änderung" mit dem Namen der Zeile für Screenreader unsichtbar machen.

## Barrierefreiheit

-   Es ist eine Definitionliste (`<dl>`): Screenreader lesen Schlüssel und Wert als Paare aus.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-summary-list"`

auf dem `<dl>`

Schlüssel, Wert und Änderung in Spalten mit Strichen.

`class="change"`

auf dem Links `<dd>`

""Change" rechts; auf Mobilgeräten darunter.