# Container: what it is and how it works · Zorraquino
> In interface design, a container is a defined area that groups elements such as text, images, icons or buttons.
URL: https://www.zorraquino.com/en/dictionary/internet/container.html

# 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.

[The whole glossary](https://www.zorraquino.com/en/dictionary)

## 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.

Topics

[Technology and data](https://www.zorraquino.com/en/dictionary/category/tecnologia-y-datos)

## Related concepts

- [Surface colour](https://www.zorraquino.com/en/dictionary/ux/surface-color.html)
- [User interface](https://www.zorraquino.com/en/dictionary/internet/user-interface.html)
- [Padding](https://www.zorraquino.com/en/dictionary/ux/padding.html)