Skip to content

CSS: rubric-note ​

div[class~="instui-rubric-note"] — Struktureret note med rubrik-kategorier og scoreindikatorer.

✅ Brug Rubric-Note når:

  • Viser bedømmelsesrubrik eller vurderingskriterier

  • Du har brug for at strukturere indhold efter kategori med scores eller indikatorer

  • Layoutet skal fremhæve struktur og hierarki 🚫 Brug ikke Rubric-Note når:

  • Viser enkle noter eller kommentarer — brug i stedet Callout

  • Kompleks bedømmelseslogik er nødvendig — overvej en brugerdefineret komponent

Tilgængelighed ​

  • Brug tabelsemantik hvis du viser en egentlig rubrik med rækker og kolonner
  • Sørg for at scoreindikatorer ikke kun er baseret på farve
  • Giv beskrivende etiketter for hver kategori

Brug ​

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

Eksempler ​

Dele ​

DelBeskrivelse
.instui-criteriaContainer til rækker med rubrikkriterier.
.instui-descriptionDetaljeret beskrivelse af kriteriet.
.instui-headerOverskrift med titel og metadata.
.instui-nameKriteriets navn eller kategori.
.instui-rowEnkelt kriterierække.
.instui-scoreScoreindikator eller mærke.

Tilstande ​

TilstandBeskrivelse
:optional—

Forbrugte tokens ​

TokenTypeVærdi
--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——

Relateret ​