DoDont
O par "Faça assim / Não faça": o jeito certo e o errado lado a lado, cada um com o porquê.
Nesta página
Playground
Faça assim
Verbo e objeto.
Não faça
"OK" não diz o quê.
Fundo
<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>Faça assim</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Salvar alterações</button></div><p class="why">Verbo e objeto.</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>Não faça</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">"OK" não diz o quê.</p></div></div>Quando usar
- Em toda regra que se entende melhor vendo o erro: na documentação, nas diretrizes.
Quando não usar
- Para mostrar variações que estão todas certas: Example.
Exemplos
Faça assim
Verbo e objeto.
Não faça
"OK" não diz o quê.
Um par
O certo à esquerda, em musgo; o errado à direita, em vinho. Embaixo de cada um, o porquê em uma frase.
Mostrar código
<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>Regras
- O errado é um erro de verdade, que acontece, não uma caricatura.
- O porquê cabe numa frase.
- O veredito tem ícone e palavra, não só a cor.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-dodont" | em volta | Os dois lado a lado; no mobile, um embaixo do outro. |
class="do", "dont" | cada lado | Musgo para o certo, vinho para o errado. |
class="verdict", "demo", "why" | as partes | O veredito, o exemplo e o porquê. |