CSS: rubric-note ​

div[class~="instui-rubric-note"] — Структурированная заметка с категориями рубрики и индикаторами оценивания.

✅ Используйте Rubric-Note когда:

  • Отображается шкала оценивания или критерии оценки

  • Нужно структурировать содержимое по категориям с баллами или индикаторами

  • Макет должен подчёркивать структуру и иерархию 🚫 Не используйте Rubric-Note когда:

  • Отображаете простые заметки или комментарии — вместо этого используйте Callout

  • Требуется сложная логика оценивания — рассмотрите пользовательский компонент

Доступность ​

  • Используйте семантику таблицы, если отображаете настоящую рубрику с рядами и колонками
  • Убедитесь, что индикаторы баллов не опираются только на цвет
  • Добавьте описательные метки для каждой категории

Использование ​

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

Примеры ​

Части ​

ЧастьОписание
.instui-criteriaКонтейнер для строк критериев рубрики.
.instui-descriptionПодробное описание критерия.
.instui-headerЗаголовок с названием и метаданными.
.instui-nameНазвание критерия или категория.
.instui-rowОтдельная строка критерия.
.instui-scoreИндикатор балла или бейдж.

Состояния ​

СостояниеОписание
:optional—

Использованные токены ​

TokenТипЗначение
--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——

Связанные ​