UI patterns

The ui patterns entries 20

• ui patterns

  Cards

  A card is a container that bundles 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 split one screen into parallel panels, showing only one at a time. They keep pages short by hiding everything except the selected panel - which is the whole point, and the whole danger.

  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

  Carousel

  A carousel shows a sequence of panels in a single slot, one at a time, with the rest hidden until you move forward or they rotate. It saves space but at a cost: almost everything beyond the first panel goes unseen, because most people never advance and auto-rotation moves on before they engage.

  Try the demo
• ui patterns

  Modal dialog

  A modal dialog blocks interaction with the page behind it while open. Focus should enter the modal, stay within its controls, and return to the trigger when it closes. Some modals ask for a decision; others just present information or a short task. It becomes a keyboard trap only when there’s no reliable way to complete or dismiss it - not because focus is contained.

  Try the demo
• 123
  ui patterns

  Stepper (wizard)

  A stepper - or wizard - divides a long task into a short sequence of steps, showing your current position and how many remain. It turns a daunting wall of fields into a series of small, clearly finishable chunks, and the visible progress keeps you moving toward the end.

  Try the demo
• ui patterns

  Segmented control

  A segmented control is a row of two to about five mutually-exclusive options, all visible at once, where exactly one is selected. It's the inline alternative to a dropdown: for a small, stable set of choices it shows every option up front and switches in a single tap, rather than hiding them behind a menu.

  Try the demo
• ui patterns

  Search with autocomplete

  Autocomplete, or typeahead, suggests matching options as you type, helping you recognise and select what you want without spelling it fully. It turns a blank field that demands perfect recall into a guided one that meets you halfway.

  Try the demo
• ui patterns

  Filtering and faceted search

  Filtering narrows a list using a rule you pick; faceted search lets you combine several such rules - by category, price, size, or availability - each based on the items’ own attributes, and shows how many results each choice would leave. It turns a broad, flat result set into something you can shape precisely to your needs.

  Try the demo
• ui patterns

  Date picker

  A date picker lets you select a date from a calendar instead of typing it. It removes ambiguity and error: it shows valid days, settles the format, and makes "03/04" impossible to misread - because you pick the day, not describe it.

  Try the demo
• ui patterns

  Navigation drawer (hamburger)

  A navigation drawer hides a menu off-screen behind an icon - usually the three-line 'hamburger' - and slides it in when tapped. It recovers screen space by keeping navigation out of sight, which works well on small screens but loses out on wider ones where showing links directly would be better.

  Try the demo
• ui patterns

  Empty state

  An empty state is what a screen shows when there’s nothing to show yet - no results, no items, no history. It’s often the first screen a new user meets and is frequently overlooked.

  Try the demo
• ui patterns

  Command palette

  A command palette is a search box for actions: press a shortcut (often Cmd/Ctrl+K), type a few letters, and run any command, jump to any page, or find any item without hunting through menus. It collapses a whole interface's worth of navigation into one keyboard-driven box.

  Try the demo
• ui patterns

  Data table

  A data table arranges records in rows and columns so they can be scanned, compared and reordered along any field. Its power is alignment: shared columns let the eye run straight down a value to compare like with like, and sorting reorders the whole set to answer "which is biggest, newest, cheapest?" in one click.

  Try the demo
• ui patterns

  Pagination vs infinite scroll

  Two ways to handle a long list: pagination splits it into numbered pages you can jump to, while infinite scroll loads more as you scroll. Pagination shows your position and lets you skip to any section; infinite scroll offers a seamless flow without a clear end.

  Try the demo
• ui patterns

  Tabs vs accordion

  Both hide content behind clickable labels, but tabs show 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 - like Home > Catalogue > Shoes - that show your current position in the hierarchy and let you navigate back up. They quietly answer two questions: 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 anticipated structure of content while it loads - grey blocks where text and images will appear - instead of a spinner or blank. It doesn't show real progress; it previews the shape that's coming, which makes the same wait feel shorter and the page feel like it's already arriving.

  Try the demo
• ui patterns

  Toast notification

  A toast is a small, temporary message that slides in to confirm an action - like 'Saved', 'Archived', or 'Link copied' - then fades away on its own. It gives light feedback without interrupting, unlike a modal you must close.

  Try the demo
• ui patterns

  Modal vs toast

  A modal blocks interaction with the underlying interface and demands attention; a toast is non-modal, temporary feedback and should not contain essential information.

  Try the demo

Know these already? Take the ui patterns quiz, or revise the terms with flashcards.