# Ilustrações

Os desenhos do Feitio para telas vazias e erros grandes. Cada um com o uso dele e o SVG para copiar.

## Todas as ilustrações

Filtrar ilustrações

**Cesta vazia**

Tela vazia: ainda não há nada aqui.

`illustrations/empty-basket.svg`

**Papel rasgado**

Erro grande: a página ou a ação não deu certo.

`illustrations/torn-paper.svg`

Nenhuma ilustração com esse nome.

## Como usar

A ilustração vai dentro da página, como SVG, e não como imagem: assim ela usa a cor do texto e troca com o tema. O traço laranja é o que leva `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>
```

-   Sempre com `aria-hidden="true"`: o título ao lado já diz o que importa.
-   Uma por tela, no máximo, e só nos momentos sem conteúdo: tela vazia, erro grande, boas-vindas.
-   Nas fachadas de fora, a ilustração é do cliente.

## Uma ilustração nova

Na mesma mão dos ícones, com as regras de [Iconografia e ilustração](/pt/design/desenho/#ilustracao): tinta na cor do texto, um toque de laranja, traços que se cruzam. O arquivo vai em `illustrations/<nome>.svg`.