Empty state
An empty screen is an invitation to act, not a mood.
Examples
Empty
No reports yet
Create one and it appears here.
Anatomy
.empty | A centred column with generous padding; text is muted. |
> i.icon | Optional illustration icon. |
> h4 | What is missing, in the full text colour. |
> p | One line on how to fill it. |
> .btn | Optional: the action that fills it. |
Accessibility
- Only a direct
<h4>child gets the full text colour; use that level, or restyle the heading yourself if your outline needs another. - The icon is decorative. Name the action in the button ("New report", not "Get started").