Layout
A estrutura que envolve o conteúdo. O grid é a assinatura visual do CIC — a 01 §3.3 diz que ele "não é só funcional, aparece como elemento visual". Toda a família é aria-hidden: é textura, não informação.
AppLayout
A casca das aplicações: breadcrumb acima, sidebar à esquerda, conteúdo à direita. É o que este site usa para se navegar — a barra ao lado é ele.
Não há exemplo embutido aqui de propósito: você já está dentro de um. A sidebar à esquerda, o breadcrumb no topo e esta área de conteúdo são o AppLayout em uso.
<AppLayout appTitle="Gestão de visitas" navItems={itens} activeId="visitas">
{conteudo}
</AppLayout>GridBackdrop
Textura de área inteira. O fade tem direção: down para head, up para footer, radial para bloco isolado.
<GridBackdrop fade="down" tint="top" size="lg">{conteudo}</GridBackdrop>GridBlock
Objeto de tamanho definido, usado como marca gráfica de canto. Diferente do GridBackdrop, que é textura de área.
<GridBlock size="xs" cols={8} rows={20} diagonal bordered />GridHeader
Faixa de cabeçalho com o grid ancorado no topo dissolvendo para baixo, mais um gradiente sutil de superfície. A separação embaixo é hairline de 1px, não sombra.
Connected Innovation Center
Gestão de visitas
24 visitas agendadas neste mês.
<GridHeader eyebrow="…" title="Gestão de visitas" action={<Button … />} />GridFooter
O espelho do GridHeader: o grid entra cheio na base e dissolve para cima. É um <footer> de verdade, então entra como landmark.
<GridFooter note="CIC Design System · Versão 0.2">{links}</GridFooter>Head e footer juntos
O efeito que só aparece com os dois: a textura abre e fecha a página, e o meio fica limpo para a informação.
São Paulo
Connected Innovation Center
Conteúdo
Aqui a textura sai de cena para não disputar leitura.
MediaSplit
Painel sólido encostado no conteúdo, divisa por hairline. Empilha no mobile — abaixo de 768px não há largura para os dois lado a lado.
Innovation
Center
- Transportation.
- The future of mobility.
- Aerospace.
- Decarbonization.
<MediaSplit aside={marca} asideWidth="narrow">{conteudo}</MediaSplit>