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 simples ou comentários — use Callout em vez disso

• Lógica de avaliação complexa é necessária — 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 sejam apenas por 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 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 do critério ou categoria.
.instui-row	Linha individual de critério.
.instui-score	Indicador de pontuação ou distintivo.

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	—	—

Relacionado

• card