CSS: rubric-note

div[class~="instui-rubric-note"] — Nota estructurada con categorías de rúbrica e indicadores de puntuación.

✅ Use Rubric-Note cuando:

• Mostrar una rúbrica de calificación o criterios de evaluación

• Necesita estructurar el contenido por categorías con puntuaciones o indicadores

• El diseño debe enfatizar la estructura y la jerarquía 🚫 No use Rubric-Note cuando:

• Mostrar notas o comentarios simples — use Callout en su lugar

• Se necesita lógica de calificación compleja — considere un componente personalizado

Accesibilidad

• Use semántica de tabla si muestra una rúbrica real con filas y columnas
• Asegúrese de que los indicadores de puntuación no dependan solo del color
• Proporcione etiquetas descriptivas para cada categoría

Uso

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

Ejemplos

Partes

Parte	Descripción
.instui-criteria	Contenedor para las filas de criterios de la rúbrica.
.instui-description	Descripción detallada del criterio.
.instui-header	Encabezado con título y metadatos.
.instui-name	Nombre o categoría del criterio.
.instui-row	Fila individual de criterio.
.instui-score	Indicador de puntuación o distintivo.

Estados

Estado	Descripción
: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