CSS: rubric-note

div[class~="instui-rubric-note"] — Note structurée avec catégories de rubrique et indicateurs de notation.

✅ Utiliser Rubric-Note lorsque :

• Afficher une grille d'évaluation ou des critères d'évaluation

• Vous devez structurer le contenu par catégorie avec des scores ou des indicateurs

• La mise en page doit mettre l'accent sur la structure et la hiérarchie 🚫 Ne pas utiliser Rubric-Note lorsque :

• Afficher des notes ou commentaires simples — utiliser Callout à la place

• Une logique d'évaluation complexe est nécessaire — envisager un composant personnalisé

Accessibilité

• Utiliser la sémantique de tableau si vous affichez une vraie grille avec lignes et colonnes
• Veiller à ce que les indicateurs de score ne reposent pas uniquement sur la couleur
• Fournir des libellés descriptifs pour chaque catégorie

Utilisation

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

Parties

Partie	Description
.instui-criteria	Conteneur pour les lignes de critères de la rubrique.
.instui-description	Description détaillée du critère.
.instui-header	En-tête avec titre et métadonnées.
.instui-name	Nom du critère ou catégorie.
.instui-row	Ligne individuelle de critère.
.instui-score	Indicateur de score ou badge.

États

État	Description
:optional	—

Jetons consommés

Token	Type	Valeur
--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	—	—

Liés

• card