CSS: rubric-note ​

div[class~="instui-rubric-note"] — Structured note with rubric categories and scoring indicators.

✅ Use Rubric-Note when:

  • Displaying grading rubric or assessment criteria

  • You need to structure content by category with scores or indicators

  • The layout should emphasize structure and hierarchy 🚫 Don't use Rubric-Note when:

  • Displaying simple notes or comments — use Callout instead

  • Complex grading logic is needed — consider a custom component

Accessibility ​

  • Use table semantics if displaying a true rubric with rows and columns
  • Ensure score indicators are not color-only
  • Provide descriptive labels for each category

Usage ​

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

Parts ​

PartDescription
.instui-criteriaContainer for rubric criteria rows.
.instui-descriptionDetailed description of the criterion.
.instui-headerHeader with title and metadata.
.instui-nameCriterion name or category.
.instui-rowIndividual criterion row.
.instui-scoreScore indicator or badge.

States ​

StateDescription
:optional—

Tokens consumed ​

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