Glossary

A vertically stacked set of headings that each toggle a region of content open or closed.

A sheet that slides up from the bottom of the screen with a list of buttons, used to confirm or pick from a few related actions.

A dialog that interrupts the user to confirm a consequential or destructive action before it happens.

A grid whose columns are intentionally uneven in width, creating visual hierarchy through imbalance.

A small image that represents a user, account, or entity, usually circular and used next to names or actions.

A small label, often a number or a dot, that sits on or beside another element to indicate status or count.

A grid layout of varying-size cards arranged like the compartments of a bento box.

A panel that slides up from the bottom of the screen, often draggable to expand or dismiss.

A horizontal list of links showing the user's location in a site's hierarchy, with each level clickable to navigate up.

A bounded rectangular container that groups related content and actions as a single unit.

A horizontally scrolling row of items that the user pages through, often with dots or arrows to navigate.

A small pill-shaped element that represents an input, attribute, selection, or filter, often interactive.

A text input combined with a dropdown list of suggestions that filter as the user types.

A searchable launcher that lets users type to find and run actions, navigate, or jump to records.

A layout pattern where components style themselves based on the size of their container rather than the size of the viewport.

A motion where one element morphs into a new view, preserving its identity as it grows.

A menu that appears at the cursor or touch point, listing actions relevant to the clicked element.

A transition where one element fades out as another fades in, the two briefly overlapping in opacity.

A window that appears over the rest of the UI to prompt the user for input or attention before they can continue.

A visual affordance — usually a small grip icon or texture — signaling that an element can be dragged.

A panel that slides in from the edge of the screen, holding secondary content or navigation.

The UI shown when a list, section, or screen has no items to display.

A circular, elevated button anchored to a corner of the screen that triggers the most common action on the current view.

The visible outline drawn around the element that currently has keyboard focus.

Keeping keyboard focus inside a specific region (typically a modal dialog) until that region is dismissed.

A large introductory section at the top of a page that sets the tone and message.

A page layout with a full-width header and footer, plus three columns of content between them.

A preview panel that appears when the user hovers over a link or reference, showing richer content than a tooltip.

A list that automatically loads more items as the user scrolls toward the bottom.

An interaction where text or fields become editable in place when the user clicks them, rather than opening a separate edit form.

Form-field feedback that appears as the user types, rather than waiting until they submit.

A two-pane layout with a list of items on one side and the selected item's details on the other.

A transition where a new view slides up over the current view to present a self-contained task.

A layout pattern where content lives outside the visible viewport and slides in on demand.

The guided sequence of screens that walks a user through first use of a product.

A pattern where the UI shows the result of an action immediately, before the server has confirmed it.

A control that splits a long list into numbered pages, with links to jump between them.

An effect where layers on a page move at different speeds during scroll, creating a sense of depth.

A UI that blocks access to content or features until the user pays or subscribes.

A small floating panel anchored to a trigger element, used for short contextual content.

An interaction where the user drags the top of a scrollable list downward to trigger a refresh.

A transition where a new view slides in from the side, pushing the current view off-screen.

Scrolling behavior where the viewport rests on specific positions instead of stopping anywhere the user releases.

An animation whose progress is tied to scroll position rather than time, advancing as the user scrolls.

A draggable indicator on a timeline that lets the user move through time-based media.

A row of joined buttons that act as a mutually-exclusive selector — exactly one segment is active at a time.

A transition where an element persists visually across two views, moving from its position in one to its position in the next.

An animated gradient that sweeps across a skeleton placeholder to signal that content is loading.

A placeholder UI of gray shapes shown while real content loads.

A link, usually hidden until focused, that lets keyboard and screen reader users jump past repeated navigation to the main content.

A draggable handle on a track that lets the user pick a value, or range of values, from a continuous scale.

A layout that divides the viewport into two side-by-side panes, often resizable.

An animation curve based on the physics of a spring rather than a fixed cubic-bezier function.

An animation pattern where a group of elements animates one after another with a small delay between each.

An ambiguous term used for two different controls: a numeric +/- input, or a multi-step progress indicator.

A header that stays attached to the top of the viewport as the user scrolls.

A horizontal swipe gesture on a list item that removes, archives, or otherwise dismisses it.

A control with two mutually exclusive states (on or off) that takes effect immediately when toggled.

A persistent row of top-level destinations along the bottom of a mobile app, with one item selected at a time.

A row of labeled buttons that each show a different panel of content, with only one panel visible at a time.

A short, self-dismissing message that appears at the edge of the screen to confirm an action or report a status.

A small text label that appears next to an element on hover or focus, briefly explaining what it does.

A browser-native transition between two states of a page, where the browser animates the difference automatically.

The screen shown when a user opens a feature for the first time, before they've created any data.