CSS: rubric-note

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

✅ Використовуйте Rubric-Note коли:

• Потрібно показати шкалу оцінювання або критерії оцінювання

• Потрібно структурувати вміст за категоріями з балами або індикаторами

• Макет має підкреслювати структуру та ієрархію 🚫 Не використовуйте Rubric-Note коли:

• Показуєте прості нотатки або коментарі — замість цього використовуйте Callout

• Потрібна складна логіка оцінювання — розгляньте можливість створення кастомного компоненту

Доступність

• Використовуйте семантику таблиці, якщо показуєте справжню рубрику з рядками та стовпцями
• Переконайтеся, що індикатори балів не залежать лише від кольору
• Надайте описові підписи для кожної категорії

Використання

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

Пов'язані

• card