zero·style

Browse

Explore the dictionary by design domain and category. Pick a group to list every curated term it holds.

Overlays & containers · UI / UX

18 terms

  • accordion

    A stack of headed sections where clicking a heading expands that section to reveal its content and usually collapses the others, so only a little is open at once.

  • action sheet

    A panel, usually sliding up from the bottom on mobile, that presents a short menu of choices related to what you just tapped, including a way to cancel.

  • backdrop

    The dimmed layer placed behind a pop-up such as a modal or menu, which fades out the rest of the screen so attention lands on the thing in front. Clicking it usually closes the pop-up.

  • bottom sheet

    A panel that slides up from the bottom of the screen to show extra options or content, common on mobile; you can often drag it higher or swipe it away.

  • callout

    A small boxed note set apart from the surrounding text — often with a colored border or icon — to highlight a tip, warning, or important point.

  • card

    A rectangular container, usually with rounded corners and a subtle shadow, that groups a single piece of content — like a product, article, or profile — into a tidy, tappable block.

  • dialog box

    A small self-contained window that asks a question, shows a message, or collects a short bit of input, usually with buttons like OK or Cancel.

  • fullscreen dialog

    A pop-up that expands to fill the entire screen instead of floating as a small box, used on small screens or for tasks that need plenty of room, such as filling in a long form.

  • hovercard

    A rich preview card that appears when you hover over a name, link, or avatar, showing a summary such as a profile or page snippet without clicking through.

  • lightbox

    An overlay that shows an image or video enlarged and centered on a dimmed background, letting you view it up close without leaving the page.

  • modal

    A window that opens on top of the current page and blocks interaction with everything behind it until you respond to it or close it.

  • modeless dialog

    A pop-up window you can leave open while you keep using the rest of the app; it doesn't block the page behind it the way a normal modal does.

  • overlay

    A visual layer that sits on top of the rest of the interface, temporarily covering part or all of it to show something like a message, menu, or pop-up until the user deals with it.

  • panel

    A distinct region of the interface that groups related content or controls together, often boxed off or shaded to separate it from the rest of the screen.

  • portal

    A behind-the-scenes technique that lets a pop-up like a dialog or tooltip be drawn at the top level of the page rather than where it lives in the code, so it can float above everything without being cut off by its container.

  • scrim

    The dimmed, semi-transparent layer placed over a page to darken the background when a modal or drawer opens, keeping focus on the panel in front.

  • side sheet

    A container that slides in from the left or right edge and attaches to the side of the screen, holding extra details or options while you keep working with the main content.

  • well

    An inset container that looks recessed or sunken into the page, used to visually set a block of content apart from what surrounds it.

Stop describing. Start naming.

Turn a plain-language description into a designer-ready brief in minutes.

Start a brief