# Illustrations

Les dessins de Feitio pour les écrans vides et les grandes erreurs. Chacun avec son usage et l'SVG à copier.

## Toutes les illustrations

Filtrer les illustrations

**Empty basket**

Écran vide : rien ici encore.

`illustrations/empty-basket.svg`

**Torn paper**

Grande erreur : la page ou l'action a échoué.

`illustrations/torn-paper.svg`

Aucune illustration sous ce nom.

## Comment les utiliser

Une illustration va à l'intérieur de la page, en tant que SVG, pas comme une image : ainsi elle utilise la couleur du texte et bascule avec le thème. Le trait orange est celui avec `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>
```

-   Toujours avec `aria-hidden="true"`: le titre à côté indique déjà ce qui compte.
-   Au maximum un par écran, et uniquement dans les moments sans contenu: un écran vide, une grosse erreur, un bienvenue.
-   Sur les façades extérieures, l'illustration appartient au client.

## Une nouvelle illustration

De la même main que les icônes, en suivant les règles de [Iconographie et illustration](/fr/design/desenho/#ilustracao): encre dans la couleur du texte, une touche d'orange, traits croisés. Le fichier va dans `illustrations/<name>.svg`.