# Illustrations

Feitio’s drawings for empty screens and big errors. Each with its use and the SVG to copy.

## All illustrations

Filter illustrations

**Empty basket**

Empty screen: nothing here yet.

`illustrations/empty-basket.svg`

**Torn paper**

Big error: the page or the action failed.

`illustrations/torn-paper.svg`

No illustration by that name.

## How to use

An illustration goes inside the page, as SVG, not as an image: that way it uses the text color and switches with the theme. The orange stroke is the one with `class="feitio-hot"`.

```html
<div class="feitio-empty-state">
  <svg viewBox="0 0 120 100" aria-hidden="true" …>…</svg>
  <h2>Nenhum agendamento ainda</h2>
  <p>Crie o primeiro e ele aparece aqui.</p>
</div>
```

-   Always with `aria-hidden="true"`: the heading next to it already says what matters.
-   At most one per screen, and only in moments without content: an empty screen, a big error, a welcome.
-   In outside facades, illustration belongs to the client.

## A new illustration

By the same hand as the icons, following the [Iconography and illustration](/en/design/desenho/#ilustracao) rules: ink in the text color, a touch of orange, crossing strokes. The file goes in `illustrations/<name>.svg`.