O escritório de São Paulo mudou
A partir de segunda, 09/11, a equipe trabalha na Rua Augusta, 1500. O estacionamento fica no segundo subsolo.
Box
Caixa — um elemento simples que renderiza a tag que você escolhe com `as`. Use quando um bloco precisa do significado certo (uma seção, um artigo, uma lista) e de mais nada.
Instalação
Configure o Camaleo uma vez (Instalação) e importe. Ele não tem estado, então renderiza no servidor.
import { Box } from "@camaleo/react";Anatomia
O Box é um elemento só, com data-slot="box" e nenhum estilo próprio. O que ele entrega é a tag: aqui uma seção tem um cabeçalho e uma lista, cada um um Box com um as diferente.
box <section> · as="section", nomeada pelo título
box <header> · as="header"
box <ul> · as="ul"
box <li> · as="li", um por item
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Seu plano
Equipe, 8 de 10 lugares em uso. Renova em 14/12/2026 por R$ 960.
Anexos
- contrato-assinado.pdfPDF · 1,2 MB
- planta-baixa.pngImagem · 840 KB
- orcamento-2027.xlsxPlanilha · 96 KB
Uma lista de coisas
Três arquivos são uma lista, então renderize ul e li. O leitor de tela anuncia "lista, 3 itens" e a pessoa sabe quanto vem pela frente.
Um post que se sustenta sozinho
as="article" para conteúdo que faz sentido isolado, como um post ou um comentário. O header e o footer dentro dele não viram landmarks da página.
Landmark de navegação
as="nav" com aria-label deixa quem usa leitor de tela pular direto para esses links. Marque a página atual com aria-current="page".
Landmark de busca
Um formulário com role="search" vira um landmark que a pessoa alcança de qualquer lugar. Dê um nome quando a página tiver mais de uma busca.
Antes do lançamento
- Congelar o changelog
- Rodar a migração em homologação
- Criar a tag da versão 2.4.0
- Anunciar em #lancamentos
Renderizado como <ol>
Com ordem ou sem
Desligue e ligue. Passos que precisam acontecer em sequência são um ol; os números vêm do navegador e o leitor de tela diz "1 de 4".
Dica: O Box não adiciona espaçamento nem cor. Passe tokens no style ou numa classe, e ele acompanha o estilo como o resto da página.
Espaço e cor com tokens
O Box não tem props de padding nem de fundo. Estilize com tokens var(--cml-…) e ele muda com o estilo, como os componentes ao redor.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Formulário de preferênciasBox · Heading · Switch · Button
Novidades da equipe
O escritório de São Paulo mudou
A partir de segunda, 09/11, a equipe trabalha na Rua Augusta, 1500. O estacionamento fica no segundo subsolo.
O planejamento do 4º trimestre começou
Coloque suas propostas no quadro até sexta, 13/11. A votação é no dia 18.
Mural de novidades da equipeBox · Badge · Avatar · Separator
Rodapé do siteBox · Grid · Link · Separator
Boas práticas
- contrato-assinado.pdf
- planta-baixa.png
- orcamento-2027.xlsx
FaçaLista renderizada como lista.
O leitor de tela conta os itens e deixa a pessoa pular o grupo inteiro.
contrato-assinado.pdfplanta-baixa.pngorcamento-2027.xlsx
EviteItens numa fileira de divs.
Parece igual, mas o leitor de tela lê três palavras soltas, sem pista de que andam juntas.
Façanav para links que levam a outras páginas.
Quem pula entre landmarks espera encontrar ali a navegação do site ou da seção.
Evitenav em volta de botões de filtro.
Filtros mudam a lista desta página; não são navegação. Um grupo simples (ou um Toolbar) mantém a lista de landmarks curta e honesta.
Props
PropriedadeTipoPadrãoDescrição
as"div" | "section" | "article" | "nav" | "ul" | "li" | …"div"Elemento renderizado, para a semântica certa (por exemplo
as="ul").O as aceita div, section, article, main, aside, header, footer, nav, ul, ol, li, span, form e figure. Todas as outras props vão para esse elemento, então aria-*, role, id e eventos funcionam normalmente.
Styling hooks
O Box não desenha nada, então o gancho é o atributo: estilize a partir de um elemento pai ou de uma classe.
Atributos
data-slot"box"
Tokens que ele lê
/* um painel discreto para cada seção Box da página de preferências */
.settings [data-slot="box"]:where(section) {
padding: var(--cml-surface-padding);
border-radius: var(--cml-radius-surface);
background: var(--cml-surface);
}Acessibilidade
—O Box não renderiza nenhum elemento interativo. O foco passa pelos filhos na ordem do DOM.
- Escolha a tag pelo conteúdo: uma seção com título, um artigo, uma lista. A tag é o que o leitor de tela anuncia; o visual vem do CSS.
- Uma section só vira landmark de região quando tem nome, então passe aria-labelledby com o id do título dela.
- main, header e footer só são landmarks da página no nível de cima. Use main uma vez por página e não coloque dentro de um layout que já tem um.
- Layout nunca carrega significado sozinho: se dois itens estão relacionados, diga isso na marcação (uma lista, um título), não só com espaço ou posição.
Relacionados
StackUma coluna ou linha com espaço da escala de espaçamento.GridColunas que se alinham, ou quantas couberem.CardUma superfície com cabeçalho, conteúdo e rodapé.
Esta página foi útil? · Editar esta página no GitHub