Skip to content

CSS: rubric-note

div[class~="instui-rubric-note"] — Strukturierte Notiz mit Rubrik-Kategorien und Bewertungsindikatoren.

✅ Rubric-Note verwenden, wenn:

  • Eine Bewertungsrubrik oder Bewertungskriterien angezeigt werden

  • Inhalte nach Kategorien mit Punkten oder Indikatoren strukturiert werden müssen

  • Das Layout Struktur und Hierarchie betonen soll 🚫 Rubric-Note nicht verwenden, wenn:

  • Einfache Notizen oder Kommentare angezeigt werden — stattdessen Callout verwenden

  • Komplexe Bewertungslogik erforderlich ist — erwäge eine benutzerdefinierte Komponente

Barrierefreiheit

  • Tabellensemantik verwenden, wenn eine echte Rubrik mit Zeilen und Spalten dargestellt wird
  • Sicherstellen, dass Bewertungsindikatoren nicht nur über Farbe vermittelt werden
  • Beschreibende Bezeichnungen für jede Kategorie bereitstellen

Verwendung

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

Teile

TeilBeschreibung
.instui-criteriaContainer für Rubrik-Kriterienzeilen.
.instui-descriptionDetaillierte Beschreibung des Kriteriums.
.instui-headerKopfzeile mit Titel und Metadaten.
.instui-nameName des Kriteriums oder Kategorie.
.instui-rowEinzelne Kriterienzeile.
.instui-scoreBewertungsindikator oder Abzeichen.

Zustände

ZustandBeschreibung
:optional

Verbrauchte Tokens

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

Verwandt