# DoDont

The "Do / Don’t" pair: the right way and the wrong way side by side, each with its why.

## 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>Do</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Save changes</button></div><p class="why">Verb and object.</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>Don’t</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">&quot;OK&quot; does not say what.</p></div></div>
```

## When to use

-   For every rule that is clearer when you see the mistake: in documentation, in guidelines.

## When not to use

-   **To show variations** that are all right: Example.

## Examples

### A pair

The right one on the left, in moss; the wrong one on the right, in wine. Under each, the why in one sentence.

Show code

```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>
```

## Rules

-   The wrong one is a real mistake that happens, not a caricature.
-   The why fits in one sentence.
-   The verdict has icon and word, not just color.

## Attributes

Attribute

Values

What for

`class="feitio-dodont"`

around

The two side by side; on mobile, stacked.

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

each side

Moss for right, wine for wrong.

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

the parts

The verdict, the example and the why.