# Illustrationen

Feitios Zeichnungen für leere Screens und große Fehler. Jede mit ihrem Verwendungszweck und dem SVG zum Kopieren.

## Alle Illustrationen

Filtern von Illustrationen

**Empty basket**

Leerer Screen: hier noch nichts.

`illustrations/empty-basket.svg`

**Torn paper**

Großer Fehler: die Seite oder die Aktion ist gescheitert.

`illustrations/torn-paper.svg`

Keine Illustration mit diesem Namen.

## Wie man sie verwendet

Eine Illustration befindet sich auf der Seite als SVG, nicht als Bild: so nutzt sie die Textfarbe und wechselt mit dem Thema. Der orangefarbene Strich ist der mit `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>
```

-   Immer mit `aria-hidden="true"`: das nächste Überschrifts-Element sagt bereits, worum es geht.
-   Maximal eines pro Bildschirm und nur in Momenten ohne Inhalt: ein leerer Bildschirm, eine große Fehlermeldung, ein Willkommensbildschirm.
-   In externen Fassaden gehört die Illustration zum Kunden.

## Eine neue Illustration

Von derselben Hand wie die Icons, nach den Regeln von [Iconographie und Illustration](/de/design/desenho/#ilustracao): Tinte in der Textfarbe, ein Hauch Orange, überkreuzte Striche. Die Datei landet in `illustrations/<name>.svg`.