DoDont

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

Auf dieser Seite

Playground

So geht’s

Verb und Objekt.

Nicht so

„OK“ sagt nicht, was.

Hintergrund

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

Änderungen speichern

Verb und Objekt.

Don’t

"OK" sagt nichts aus.

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.