Empty state
What to show when there’s nothing here yet: a fresh account, an empty album, a search with no results. A quiet icon, a short title, one line of help and one way forward.
- CSS
css/components/empty-state.css
01 — Variants
First use
A new page with nothing in it. Offer the one action that fills it.
No photos yet
Post your first photo and it shows up here.
Boxed
.empty-state--boxed frames an empty region inside a page. Add .knockout for the corner.
This album is empty
Add photos from your library, or import a folder.
No results
Say what was searched, and offer to clear it.
No photos match “harbour at noon”
Check the spelling or try fewer words.
02 — Usage
Use it for
- Every list, table and gallery that can be empty.
- One or two actions at most.
Avoid
- A bare “Nothing here”.
- Illustrations. Keep to one hairline icon.
03 — Accessibility
Notes
- The title is a real heading at the right level for its place in the page.
- The icon is decorative (
aria-hidden="true").