Este bloco combina slots de título e conteúdo em uma única estrutura reutilizável.
Operadores podem ser adicionados sem sair do contexto atual.
Zona principal
O conteúdo principal pode crescer naturalmente com espaçamento padrão.
Zona lateral
Esta zona lateral usa um fundo claro para destacar conteúdo complementar.
Layout de três zonasRascunho
Painel esquerdo
Navegação secundária ou metadados podem viver aqui.
Conteúdo principal
Informações primárias permanecem centralizadas para legibilidade.
Painel direito
Ações e insights contextuais podem ser agrupados deste lado.
Coluna fixa ao lado
Uma coluna estreita dimensionada na escala --size, ao lado de um corpo que absorve a largura restante.
128Projeções
Bloco primário
Um bloco com um título e texto de corpo.
Bloco secundário
Outro bloco para demonstrar espaçamento.
Cartões
Bloco primário
Um bloco com um título e texto de corpo.
Bloco secundário
Outro bloco para demonstrar espaçamento.
Bloco terciário
Um terceiro bloco na linha.
Uma marca no canto
`block--mark` coloca um pequeno ícone no canto superior no início de um bloco: o que é — o tipo de um cartão colocado em um diagrama, o tipo de um documento —, ao lado do que diz, não um título.
Bloco primário
Um bloco com um título e texto de corpo.
Bloco primário
Um bloco com um título e texto de corpo.
Bloco primário
Um bloco com um título e texto de corpo.
Um bloco que é um link
Todo o cartão é o link — para uma escolha feita ao selecionar um cartão entre vários: um plano, um ramo, um modelo. Ele é lido como texto, não como uma ação sutil; sob o ponteiro, seu fundo ganha uma nuance e sua borda se torna firme, e o teclado o encontra pelo anel de foco que todo controle possui.
Um único valor ou ícone grande, centralizado. Usado para contadores de painel e azulejos de status — adicione block--square para manter o azulejo quadrado, independentemente de sua largura.
128Projeções
99.9%Tempo de atividade
Ao vivo
Taxa de transferência
42Eventos por segundo
Figuras principais
A figura lida como uma figura-chave do painel: `block--figure--start` a coloca a partir do início da linha, o rótulo acima, o valor com sua unidade recuada (`block--figure-unit`), e uma linha abaixo dizendo do que é feita (`block--figure-sub`). `block--tone-cat-<name>` desenha a barra da categoria ao longo da borda; um `a.block--link` abre a visualização da figura. Em uma `grid`, a linha vai para várias linhas à medida que o espaço se estreita.
A cor de um estado — ou de uma categoria — como uma barra ao longo da borda da frente, e nada mais: a mesma barra que uma mensagem usa, sem o fundo colorido, para que uma lista delas seja lida como uma lista e não como um alerta. Qualquer bloco pode usá-la, uma barra em cima de um bloco incluído.
block--tone-info — o chão permanece pertencente ao bloco, apenas a borda da frente carrega a cor.
block--tone-success — o chão permanece pertencente ao bloco, apenas a borda da frente carrega a cor.
block--tone-warning — o chão permanece pertencente ao bloco, apenas a borda da frente carrega a cor.
block--tone-error — o chão permanece pertencente ao bloco, apenas a borda da frente carrega a cor.
block--tone-cat-lavender — o chão permanece pertencente ao bloco, apenas a borda da frente carrega a cor.
Pilhas
Horizontal
Colunas iguais, largura total, se ajusta em caso de transbordo.
O primeiro filho cresce, o último filho permanece fixo — usado para linhas de lead + ação.
Descreva a ação neste texto de lead.
Ações no canto
`has-corner-actions` em um quadro — um lead, um bloco, um bloco de código, uma mensagem — e suas ações de ícone em um `corner-actions` dentro dele: no canto superior no seu final, mostrado enquanto o quadro está apontado ou mantém o teclado, sempre em uma tela sem ponteiro (`corner-actions--always` para mostrá-los para sempre). Um quadro com texto corrido mantém uma coluna livre para eles.
Este lead pode ser copiado com o botão em seu canto.
Um bloco com duas ações em seu canto, fora do caminho até que seja apontado.
Aninhado
Pilhas horizontais contendo pilhas verticais — grade típica de painel.