CSS: rubric-note

div[class~="instui-rubric-note"] — Nota estructurada amb categories de rúbrica i indicadors d'avaluació.

✅ Utilitza Rubric-Note quan:

• Mostrar una rúbrica de correcció o els criteris d'avaluació

• Necessites estructurar el contingut per categories amb puntuacions o indicadors

• El disseny ha d'emfatitzar l'estructura i la jerarquia 🚫 No utilitzis Rubric-Note quan:

• Mostrar notes o comentaris simples — utilitza Callout en el seu lloc

• Es necessita una lògica de correcció complexa — considera un component personalitzat

Accessibilitat

• Utilitza semàntica de taula si mostres una rúbrica veritable amb files i columnes
• Assegura't que els indicadors de puntuació no depenguin només del color
• Proporciona etiquetes descriptives per a cada categoria

Ús

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

Exemples

Parts

Part	Descripció
.instui-criteria	Contenidor per a les files de criteris de la rúbrica.
.instui-description	Descripció detallada del criteri.
.instui-header	Capçalera amb el títol i metadades.
.instui-name	Nom o categoria del criteri.
.instui-row	Fila individual de criteri.
.instui-score	Indicador de puntuació o insígnia.

Estats

Estat	Descripció
:optional	—

Tokens consumits

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

Relacionat

• card