CSS: rubric-note ​

div[class~="instui-rubric-note"] — Nota berstruktur dengan kategori rubrik dan penunjuk skor.

✅ Gunakan Rubric-Note apabila:

  • Memaparkan rubrik pemarkahan atau kriteria penilaian

  • Anda perlu menyusun kandungan mengikut kategori dengan skor atau penunjuk

  • Susun atur harus menekankan struktur dan hierarki 🚫 Jangan gunakan Rubric-Note apabila:

  • Memaparkan nota atau komen ringkas — gunakan Callout sebaliknya

  • Logik pemarkahan yang kompleks diperlukan — pertimbangkan komponen tersuai

Aksesibiliti ​

  • Gunakan semantik jadual jika memaparkan rubrik sebenar dengan baris dan lajur
  • Pastikan penunjuk skor tidak hanya berdasarkan warna
  • Sediakan label deskriptif untuk setiap kategori

Penggunaan ​

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

Contoh ​

Bahagian ​

BahagianPenerangan
.instui-criteriaBekas untuk baris kriteria rubrik.
.instui-descriptionPenerangan terperinci tentang kriteria.
.instui-headerHeader dengan tajuk dan metadata.
.instui-nameNama kriteria atau kategori.
.instui-rowBaris kriteria individu.
.instui-scorePenunjuk skor atau lencana.

Keadaan ​

KeadaanPenerangan
:optional—

Token digunakan ​

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

Berkaitan ​