Patterns
Interface patterns as reference documents: what problem each one solves, when it fits, when it does not, and how to build it so people can use it.
Component patterns
Disclosure
- Accordion
A vertical stack of headings that each expand to show a panel of content and collapse to hide it again.
Navigation
- Breadcrumb
A trail of links that shows where a page sits in the site's hierarchy and lets people move up a level in one click.
- Pagination
Controls that split a long list of results across numbered pages and let people move between them.
- Table of contents
An in-page list of links to the sections of a long document, so readers can see its structure and jump to the part they need.
Feedback
- Empty state
What a screen shows when there is nothing in it yet, and how it helps people get to the first useful result.
Forms
- Inline validation
Check a form field as the person completes it, and show the result next to the field instead of after submit.