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

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

Beispiele

Teile

Teil	Beschreibung
.instui-criteria	Container für Rubrik-Kriterienzeilen.
.instui-description	Detaillierte Beschreibung des Kriteriums.
.instui-header	Kopfzeile mit Titel und Metadaten.
.instui-name	Name des Kriteriums oder Kategorie.
.instui-row	Einzelne Kriterienzeile.
.instui-score	Bewertungsindikator oder Abzeichen.

Zustände

Zustand	Beschreibung
:optional	—

Verbrauchte Tokens

Token	Typ	Wert
--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

• card