Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Container

Contêiner que centraliza o conteúdo da página e limita a largura, com margem nas laterais para o texto nunca encostar na borda do celular. Quatro tamanhos, de uma coluna de leitura de 40rem a um dashboard de 80rem.

Padrão CSS max-inline-size + margin-inline: autoComponente de servidorCódigo ↗
minimal · light · #3fa34d

Histórico de pedidos

Todos os pedidos dos últimos 12 meses, com as notas fiscais para baixar.

size

Instalação

Configure o Camaleo uma vez (Instalação) e importe o componente. Ele não tem estado, então renderiza no servidor.

import { Container } from "@camaleo/react";

Anatomia

Um só elemento. O tamanho chega como a custom property --cml-container-max, então o seu CSS ainda pode mudá-lo.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. A caixa com borda em cada um faz o papel da janela do navegador; aumente e diminua a sua janela para ver a coluna acompanhar.

minimal · light · #3fa34d

Guias · 14/03/2026 · 6 min de leitura

Como baixamos o prazo de entrega para dois dias

No ano passado, um pedido de café levava cinco dias para chegar a São Paulo. Passamos a torra para segunda e quinta, imprimimos as etiquetas na noite anterior e começamos a despachar de um segundo galpão em Campinas. Veja o que mudou, semana a semana.

sm · 40rem (640px): formulários, artigos, login.

Quatro tamanhos

Escolha um tamanho. O desenho é uma tela de 1440 px reduzida para caber, então as proporções são as reais: sm para leitura e formulários, lg (o padrão) para a maioria das páginas, xl para tabelas.

Passando café no coador

Escalde o filtro de papel com água quente e descarte essa água. Coloque 15 g de café em moagem média-fina, despeje 30 ml de água a 94 °C e espere 30 segundos para a pré-infusão. Despeje o resto em círculos lentos até chegar a 250 ml, uns dois minutos e meio no total.

Largura de leitura

Texto longo se lê melhor com 60 a 75 caracteres por linha. Use --cml-container-max: 65ch e a coluna acompanha a fonte, não a tela.

Novidade do mês

Assine e economize 15%

Café fresco a cada duas semanas, torrado no dia do envio. Pause ou cancele quando quiser.

Seção de ponta a ponta

Coloque o fundo numa section de fora e o Container dentro dela: a cor vai de borda a borda e o texto fica alinhado com o resto da página.

Pedido nº 4821

Saiu para entrega. Chega hoje entre 14h e 16h.

padding-inline: 1rem

Margem no celular

Ligue a margem maior. Abaixo do limite, a coluna ocupa a tela toda mas mantém 1rem de cada lado; mude --cml-container-padding para dar mais respiro.

Crie sua conta

Leva um minuto. Não pedimos cartão no teste de 14 dias.

Formulário estreito

Um cadastro não precisa da largura da página. size="sm" deixa rótulos, campos e o botão ao alcance de um só olhar.

Loja Acme

Seus pedidos

3 pedidos neste mês · R$ 932,00 no total

© 2026 Loja Acme

Como landmark

O Container é uma div comum. Passe as="main", as="article" ou as="section" com um rótulo, para quem usa leitor de tela pular direto para a coluna.

Em contexto

Containers emolduram páginas inteiras. São pedaços que você pode copiar, no estilo que escolheu.

BlogTorra

Torra clara ou escura: o que muda de verdade na xícara

Ana Ribeiro · 14/03/2026 · 6 min de leitura

Morros ao pôr do sol sobre uma fazenda de café em Minas Gerais

O ponto da torra muda mais a acidez do que a cafeína. A torra clara guarda as notas frutadas da fazenda; a escura troca essas notas por chocolate e caramelo.

Se você passa no coador, comece pela clara. Para espresso com leite, uma torra média-escura se sai melhor.

Artigo de blogContainer · Heading · Text · Image · Badge
Frete grátis acima de R$ 150

Café especial, torrado sob encomenda

Grãos de 14 pequenas fazendas, torrados na segunda e na quinta e na sua porta dois dias depois.

  • Torra sob encomenda

    Nunca mais de 3 dias depois da torra.

  • Rastreável

    Fazenda, altitude e safra em todo pacote.

  • Plano flexível

    Pule, pause ou cancele com um clique.

Seção de landing pageContainer · Grid · Badge · Button
Billbox

Configurações da conta

Esses dados aparecem nas suas notas fiscais.

Perfil

Página de configuraçõesContainer · Card · Field · Switch · Button

Boas práticas

FaçaCor na seção, conteúdo no container.

A faixa chega às duas bordas em qualquer tela, e o texto dela se alinha com a página.

EviteFundo no próprio container.

Em telas largas a cor para na coluna e parece um card fora do lugar.

FaçaColuna estreita para texto longo.

Linhas curtas ajudam o olho a achar o começo da próxima.

EviteArtigo numa coluna xl.

Linhas de 150 caracteres cansam, e a pessoa se perde no texto.

Props

PropriedadeTipoPadrãoDescrição
asTag"div"O elemento a renderizar, para a semântica certa (por exemplo as="main").
size"lg" | "md" | "sm" | "xl""lg"Largura máxima: sm 40rem (formulários, artigos), md 48rem (configurações), lg 64rem (a maioria das páginas), xl 80rem (dashboards, tabelas largas). Abaixo dela, o container ocupa a largura toda.

Todos os atributos do elemento renderizado passam adiante, como id, aria-labelledby ou style. Não aninhe containers: o padding soma no celular.

Styling hooks

Mude o visual sem copiar o componente: defina as custom properties no container, num elemento pai ou num estilo.

Atributos

data-slot"container"
--cml-container-max40rem · 48rem · 64rem · 80rem, vindo de size
--cml-container-paddingpadding lateral, 1rem por padrão

Tokens que ele lê

Só deste componente

--cml-container-max--cml-container-padding--cml-space
/* margem lateral maior de tablet para cima */
@media (min-width: 48rem) {
  [data-slot="container"] {
    --cml-container-padding: 2rem;
  }
}

Acessibilidade

—O Container não é interativo e não recebe foco. O Tab vai direto para os links e campos dentro dele.

Relacionados

TypographyTítulos e textos para o que vai dentro da coluna.CardUma superfície para um grupo de conteúdo dentro da página.AspectRatioMídia que mantém a forma em qualquer largura de coluna.
Esta página foi útil? · Editar esta página no GitHub