# Ilustraciones

Los dibujos de Feitio para pantallas vacías y grandes errores. Cada uno con su uso y el SVG para copiar.

## Todas las ilustraciones

Filtrar ilustraciones

**Empty basket**

Pantalla vacía: nada aquí aún.

`illustrations/empty-basket.svg`

**Torn paper**

Error grande: la página o la acción fallaron.

`illustrations/torn-paper.svg`

No hay ilustración con ese nombre.

## How to use

Una ilustración va dentro de la página, como SVG, no como una imagen: así usa el color del texto y cambia con el tema. El trazo naranja es el que tiene `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>
```

-   Siempre con `aria-hidden="true"`: el encabezado al lado ya dice lo importante.
-   Hasta uno por pantalla, y solo en momentos sin contenido: una pantalla vacía, un error grande, un saludo.
-   En fachadas externas, la ilustración pertenece al cliente.

## Una nueva ilustración

Con la misma mano que los iconos, siguiendo las reglas de [Iconografía e ilustración](/es/design/desenho/#ilustracao): tinta en el color del texto, un toque de naranja, trazos cruzados. El archivo va en `illustrations/<name>.svg`.