Skip to content

CSS: rubric-note

div[class~="instui-rubric-note"] — Nota strutturata con categorie della griglia di valutazione e indicatori di punteggio.

✅ Usa Rubric-Note quando:

  • Visualizzi una griglia di valutazione o criteri di valutazione

  • Devi strutturare il contenuto per categorie con punteggi o indicatori

  • Il layout deve enfatizzare struttura e gerarchia 🚫 Non usare Rubric-Note quando:

  • Visualizzi semplici note o commenti — usa invece Callout

  • È necessaria una logica di valutazione complessa — considera un componente personalizzato

Accessibilità

  • Usa la semantica di tabella se stai mostrando una vera griglia con righe e colonne
  • Assicurati che gli indicatori di punteggio non siano basati solo sul colore
  • Fornisci etichette descrittive per ogni categoria

Uso

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

Parti

ParteDescrizione
.instui-criteriaContenitore per le righe dei criteri della griglia di valutazione.
.instui-descriptionDescrizione dettagliata del criterio.
.instui-headerIntestazione con titolo e metadati.
.instui-nameNome o categoria del criterio.
.instui-rowRiga del singolo criterio.
.instui-scoreIndicatore di punteggio o distintivo.

Stati

StatoDescrizione
:optional

Token consumati

TokenTipoValore
--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

Correlati