Empty screen: nothing here yet.
illustrations/empty-basket.svgIllustrations
Feitio’s drawings for empty screens and big errors. Each with its use and the SVG to copy.
On this page
All illustrations
Big error: the page or the action failed.
illustrations/torn-paper.svgNo 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".
<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 rules: ink in the text color, a touch of orange, crossing strokes. The file goes in illustrations/<name>.svg.