CSS: rubric-note

div[class~="instui-rubric-note"] — Nota estruturada com categorias de rubrica e indicadores de pontuação.

✅ Use Rubric-Note quando:

• Exibindo rubrica de avaliação ou critérios de avaliação

• Você precisa estruturar o conteúdo por categoria com pontuações ou indicadores

• O layout deve enfatizar estrutura e hierarquia 🚫 Não use Rubric-Note quando:

• Exibindo notas ou comentários simples — use Callout em vez disso

• É necessária lógica de avaliação complexa — considere um componente personalizado

Acessibilidade

• Use semântica de tabela se estiver exibindo uma rubrica real com linhas e colunas
• Garanta que os indicadores de pontuação não dependam apenas de cor
• Forneça rótulos descritivos para cada categoria

Uso

@import "@pantoken/plugin-layouts/layouts.css";

Exemplos

Partes

Parte	Descrição
.instui-criteria	Contêiner para as linhas de critérios da rubrica.
.instui-description	Descrição detalhada do critério.
.instui-header	Cabeçalho com título e metadados.
.instui-name	Nome ou categoria do critério.
.instui-row	Linha individual de critério.
.instui-score	Indicador ou distintivo de pontuação.

Estados

Estado	Descrição
:optional	—

Tokens consumidos

Token	Tipo	Valor
--instui-color-background	—	—
--instui-color-border	—	—
--instui-color-info-background	—	—
--instui-color-info-text	—	—
--instui-color-primary	—	—
--instui-color-surface	—	—
--instui-color-text-secondary	—	—
--instui-font-size-small	<length>	—
--instui-font-weight-semibold	—	—
--instui-radius-medium	—	—
--instui-space-medium	—	—
--instui-space-small	—	—

Relacionados

• card