Topic
UI patterns
UI patterns are the solved problems of interface design: tabs, accordions, the components you reach for so you are not reinventing the wheel on every screen. Each one is a deal, though - it tidies the page by hiding something, and the craft is knowing what you can afford to tuck away.
This cluster takes the everyday components and asks what they are actually for. A pattern used out of habit can quietly bury the one detail a visitor came to find; used well, it makes a dense page feel calm.
Every entry here is built from the pattern it describes - you operate the real thing, then read what it costs and when to reach for it.
The ui patterns entries 11
-
ui patterns
Cards
A card is a container that groups everything about one thing - image, title, detail, action - into a single bounded unit you can scan and act on as a whole. Its job is to make the edges of "one item" obvious, so a list of many things reads as many things, not one undifferentiated run of text.
Try the demo -
ui patterns
Tabs
Tabs slice one area of the screen into parallel panels and show just one at a time. They keep a page short by hiding all but the panel you've picked - which is the whole trick, and the whole risk.
Try the demo -
ui patterns
Accordion
An accordion is a stack of headed panels that open and close on click, folding long content into a scannable list of titles you can expand as needed. This very demo is one - the panels below are the pattern.
Try the demo -
ui patterns
Modal dialog
A modal dialog overlays the page and requires a decision before you can proceed - everything behind it is disabled. Used well, it focuses attention; used poorly, it traps the keyboard and loses users entirely.
Try the demo -
ui patterns
Empty state
An empty state is what a screen shows when there is nothing to show yet - no results, no items, no history. It is the most overlooked screen in the product, and often the first one a new user meets.
Try the demo -
ui patterns
Pagination vs infinite scroll
Two ways to handle a long list: pagination splits it into numbered pages you navigate between, while infinite scroll loads more content as you scroll down. Pagination gives users control and lets them know where they are; infinite scroll offers a smooth, continuous flow without a clear end.
Try the demo -
ui patterns
Tabs vs accordion
Both hide content behind clickable labels, but tabs display them side by side horizontally, revealing one at a time, while accordions stack them vertically and let panels expand in place. The choice often depends on how many sections there are and screen width.
Try the demo -
ui patterns
Breadcrumbs
Breadcrumbs are the small trail of links - Home > Catalogue > Shoes - that shows where the current page sits in the hierarchy and lets you step back up it. They answer two quiet questions at once: where am I, and how do I get back?
Try the demo -
ui patterns
Skeleton screen
A skeleton screen is a placeholder that shows the shape of content while it loads - grey blocks where text and images will appear - instead of a spinner or blank. It makes the same wait feel shorter by showing progress toward something specific.
Try the demo -
ui patterns
Toast notification
A toast is a small, transient message that slides in to confirm an action - "Saved", "Archived", "Link copied" - then disappears on its own. It gives lightweight feedback without interrupting, the opposite of a modal you must dismiss.
Try the demo -
ui patterns
Modal vs toast
Two ways to communicate that something has happened. A modal halts activity and requires a response before proceeding; a toast appears briefly, delivers its message, then disappears. One interrupts, one glides away - and choosing the wrong one creates a usability issue.
Try the demo
Know these already? Take the ui patterns quiz, or revise the terms with flashcards.