Dashboard
Interface dictionary
See a pattern you like and learn what it is called and how to describe it. Click a preview to try it.
34 entries
- NavigationSidebarNavigation fixed to one side, so every main destination is always in view.Read more
- NavigationTop navigationThe main destinations in a row across the top of the page.Read more
Products
- NavigationBottom tab barA few icon destinations fixed to the bottom of a phone screen, reachable with one thumb.Read more
Home
- NavigationHamburger menuNavigation folded behind a three-line icon, shown only when it is tapped.Read moreHome
- NavigationBreadcrumbA path showing which level you are on, where every level can be clicked to go back.Read more
Sneakers
- NavigationTabsSwitch between a few parallel blocks of content within one page.Read more
- Revealing contentDrawerA panel that slides in from the edge of the screen while the page stays behind it.Read more
- Revealing contentModalA window laid over the page that must be dealt with before anything else.Read more
- Revealing contentAccordionClick a heading to expand or collapse its content.Read more
Shipping is free above a minimum order.
Returns are accepted within seven days of delivery.
Send an email or use the online message form.
- Revealing contentPopover / TooltipA small note or set of options that floats next to an element.Read more128This number is the average of the last seven days.
- InputSingle-page formEvery field on one page, filled in and sent in one go.Read more
- InputStepper / WizardA long form cut into steps, so only a small part is filled in at a time.Read more
- 1
- 2
- 3
- 4
Step 1 of 4
Account
- InputInline editingClick the content itself to change it, with no separate form.Read more
Project name
- InputAutosaveChanges are saved as you make them, with no Save button.Read moreUntitled document
- Showing dataTableRecords of one kind in neat rows and columns, easy to scan and compare.Read more
Customer A Paid 120 Customer B Pending 45 Customer C Shipped 310 Customer D Paid 78 - Showing dataCard gridOne card per record, laid out in an even grid.Read more
- Showing dataMaster-detailA list on the left and content on the right; picking an item shows its details.Read more
Message 1
- Showing dataKanbanColumns stand for states, and cards are dragged between them to change state.Read more
To do 2
Task ATask BIn progress 1
Task CDone 1
Task D - FeedbackToastA short message that appears after an action and disappears by itself.Read moreSaved
- FeedbackInline validationRight beside the problem field, saying what is wrong and how to fix it.Read more
- FeedbackEmpty stateWhat the screen shows when there is no data: why, and what to do next.Read more
No projects yet
Create your first project to get started.
- LoadingSkeletonA grey outline of the layout shown while the content is still loading.Read moreMe
Customer A
- LoadingPaginationWith many records: split them into pages, with page numbers and Previous and Next to move between them.Read more
Search results
- Item 1
- Item 2
- Item 3
- Item 4
- LoadingPull to refreshOn a phone, pull the list down and let go to reload it.Read moreFeedPull to refresh
Post 3
Post 2
Post 1
- ControlsDropdown menuClick a button and a list of actions or choices opens beneath it.Read moreOrder 1042
- ControlsToggle switchA sliding control that flips between on and off, and takes effect right away.Read more
- Email notificationsOn
- Push notificationsOff
- ControlsCombobox (searchable select)A text box that filters the options as you type, then lets you pick one.Read more
- ControlsDate pickerOpens a calendar so you click a date instead of typing it.Read moreCheck-in date
- InputFile uploadA dashed area where you drop a file or click to choose one, with progress shown.Read more
- Revealing contentTooltipA short note that appears beside an element on hover or keyboard focus.Read moreBoldItalicLink
- Revealing contentBottom sheetOn a phone, a panel slides up from the bottom edge with a few choices or short content.Read more
Share to
- LoadingProgress barA bar that fills up to show how far along something is.Read more
- LoadingInfinite scrollMore content loads automatically as you reach the bottom, with no page buttons.Read more
Post 1
Post 2
Post 3
Post 4
Post 5
Post 6
Post 7
Post 8
- NavigationCommand paletteA shortcut key opens a search box where typing jumps to a page or runs an action.Read more