# DoDont

Das "Do / Don't"-Paar: der richtige Weg und der falsche Weg nebeneinander, jeder mit seinem Warum.

## Playground

```html
<div class="pair feitio-dodont"><div class="do"><p class="verdict"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>So geht’s</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Änderungen speichern</button></div><p class="why">Verb und Objekt.</p></div><div class="dont"><p class="verdict"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Nicht so</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">„OK“ sagt nicht, was.</p></div></div>
```

## Wann verwenden

-   Für jede Regel, die klarer wird, wenn man den Fehler sieht: in der Dokumentation, in den Richtlinien.

## Wann nicht verwenden

-   **Zum Zeigen von Variationen**, die alles in Ordnung sind: Beispiel.

## Beispiele

### Ein Paar

Der richtige auf der linken Seite, in Moos; der falsche auf der rechten Seite, in Wein. Unter jedem jeweils das Warum in einem Satz.

Code anzeigen

```html
<div class="feitio-dodont">
  <div class="do"><p class="verdict">…Faça assim</p><div class="demo">…</div><p class="why">Verbo e objeto.</p></div>
  <div class="dont"><p class="verdict">…Não faça</p><div class="demo">…</div><p class="why">"OK" não diz o quê.</p></div>
</div>
```

## Regeln

-   Der Falsche ist ein echter Fehler, der passiert, nicht eine Karikatur.
-   Das Warum passt in einen Satz.
-   Das Urteil hat Icon und Wort, nicht nur Farbe.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-dodont"`

um

Die beiden nebeneinander; auf Mobile gestapelt.

`class="do"`, `"dont"`

jeder Seite

Moss für richtig, Wein für falsch.

`class="verdict"`, `"demo"`, `"why"`

die Teile

Das Urteil, das Beispiel und der Warum.