Skip to content

CSS: rubric-note ​

div[class~="instui-rubric-note"] — Gestructureerde notitie met rubriekcategorieën en score-indicatoren.

✅ Gebruik Rubric-Note wanneer:

  • Een beoordelingsrubriek of beoordelingscriteria weergeven

  • Je inhoud per categorie moet structureren met scores of indicatoren

  • De lay-out moet structuur en hiërarchie benadrukken 🚫 Gebruik Rubric-Note niet wanneer:

  • Eenvoudige notities of opmerkingen weergeven — gebruik in plaats daarvan Callout

  • Complexe beoordelingslogica nodig is — overweeg een aangepast component

Toegankelijkheid ​

  • Gebruik tabelsemantiek als je een echte rubriek met rijen en kolommen weergeeft
  • Zorg dat score-indicatoren niet alleen kleur gebruiken
  • Geef beschrijvende labels voor elke categorie

Gebruik ​

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

Voorbeelden ​

Onderdelen ​

OnderdeelBeschrijving
.instui-criteriaContainer voor rubriekcriteria-rijen.
.instui-descriptionGedetailleerde beschrijving van het criterium.
.instui-headerKoptekst met titel en metadata.
.instui-nameNaam van criterium of categorie.
.instui-rowIndividuele criteriumrij.
.instui-scoreScore-indicator of badge.

Staten ​

ToestandBeschrijving
:optional—

Gebruikte tokens ​

TokenTypeWaarde
--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——

Gerelateerd ​