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 ​

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

Exemples ​

Parties ​

PartieDescription
.instui-criteriaConteneur pour les lignes de critères de la rubrique.
.instui-descriptionDescription détaillée du critère.
.instui-headerEn-tête avec titre et métadonnées.
.instui-nameNom du critère ou catégorie.
.instui-rowLigne individuelle de critère.
.instui-scoreIndicateur de score ou badge.

États ​

ÉtatDescription
:optional—

Jetons consommés ​

TokenTypeValeur
--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 ​