Skip to content

CSS: rubric-note

div[class~="instui-rubric-note"] — Strukturert notat med rubrikkategorier og poengindikatorer.

✅ Bruk Rubric-Note når:

  • Viser vurderingsrubrikk eller vurderingskriterier

  • Du trenger å strukturere innhold etter kategori med poeng eller indikatorer

  • Oppsettet bør fremheve struktur og hierarki 🚫 Ikke bruk Rubric-Note når:

  • Viser enkle notater eller kommentarer — bruk Callout i stedet

  • Komplekst vurderingslogikk kreves — vurder en egendefinert komponent

Tilgjengelighet

  • Bruk tabelldrevet semantikk hvis du viser en ekte rubrikk med rader og kolonner
  • Sørg for at poengindikatorer ikke kun er fargebaserte
  • Gi beskrivende etiketter for hver kategori

Bruk

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

Deler

DelBeskrivelse
.instui-criteriaBeholder for rader med rubrikkriterier.
.instui-descriptionDetaljert beskrivelse av kriteriet.
.instui-headerTopptekst med tittel og metadata.
.instui-nameKriterienavn eller kategori.
.instui-rowEnkel rad for kriterium.
.instui-scorePoengindikator eller merke.

Tilstander

TilstandBeskrivelse
:optional

Forbrukte tokens

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

Relatert