Skip to content

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

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

Parts

PartDescripció
.instui-criteriaContenidor per a les files de criteris de la rúbrica.
.instui-descriptionDescripció detallada del criteri.
.instui-headerCapçalera amb el títol i metadades.
.instui-nameNom o categoria del criteri.
.instui-rowFila individual de criteri.
.instui-scoreIndicador de puntuació o insígnia.

Estats

EstatDescripció
:optional

Tokens consumits

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