Skip to content

Container

In interface design, a container is a defined shape or area that groups and holds other interface elements, such as text, images, icons or buttons

What it means, how it is used and where it comes up, with its related concepts.

What it is and how it works

Cards, dialogs, bottom sheets and navigation bars are examples of containers. Their job is to show that the elements inside are related and to separate them from the rest, using borders, surface colour, shadow or white space.

In Material Design the term also names a component’s background, such as a button or text field container, with its own colour roles. In web development, container may refer to an HTML element that wraps content and limits its width, and in infrastructure to an isolated software package such as a Docker container; these are different meanings.

Related concepts

Container: what it is and how it works · Zorraquino