Container

Elemento que agrupa conteúdo e define os limites de um bloco na interface.

Hard

O que é

Container é um dos elementos mais básicos da interface. Ele agrupa informação, marca fronteira e organiza componentes pra a tela ficar mais fácil de entender. Um card, uma gaveta de navegação e um módulo de dashboard são todos exemplos de container fazendo esse papel.

Na prática, o container define como o conteúdo aparece e cria separação e ênfase entre os blocos. Um card que junta foto, título e descrição deixa aquele bloco escaneável de relance, porque a pessoa lê tudo como uma unidade. Sem container, a tela vira uma massa de informação sem respiro.

O container também é peça de responsividade. Quando a tela muda de tamanho, ele reorganiza o conteúdo, indo de várias colunas no desktop pra um empilhado no celular, sem perder a leitura.

Em uma frase

Vamos colocar foto, título e descrição dentro de um mesmo container pra ler como bloco.

A pergunta que ele responde

Como agrupo elementos relacionados pra a tela parecer organizada e fácil de ler?

Quando usar

Use ao agrupar conteúdo relacionado, criar hierarquia e estruturar um layout que precisa ser responsivo.

Como não usar

O cuidado é não empilhar container dentro de container sem necessidade. Aninhamento demais polui a tela e ainda atrapalha o leitor de tela a percorrer o conteúdo.

Na prática

Pense num quadro de tarefas em que cada lista e cada cartão é um container. É justamente essa estrutura de containers que faz o board parecer organizado aos olhos de quem usa.

Não confunda com

Vale separar container de card. O card é um tipo de container, e não o contrário. Ou seja, todo card é um container, mas nem todo container é um card, já que existem muitos outros formatos.

Design

Em inglês

Container

Pronúncia

con-têi-ner

Também chamado de

container, contêiner, área

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre cards e containers.