---
url: /api/css/rubric-note.md
---
# 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";
```

## Examples

-automatica11y -nocard

```html
<div class="instui-rubric-note" aria-labelledby="writing-rubric-title" data-a11y-root>
  <h2 class="instui-header" id="writing-rubric-title">Writing rubric</h2>
  <table>
    <caption>Research paper criteria</caption>
    <thead><tr><th scope="col">Criterion</th><th scope="col">Score</th><th scope="col">Description</th></tr></thead>
    <tbody class="instui-criteria">
      <tr class="instui-row"><th class="instui-name" scope="row">Evidence</th><td class="instui-score">4 of 4</td><td class="instui-description">Sources support the central claim.</td></tr>
    </tbody>
  </table>
</div>
```

## Parts

| Part | Description |
| --- | --- |
| `.instui-criteria` | Container for rubric criteria rows. |
| `.instui-description` | Detailed description of the criterion. |
| `.instui-header` | Header with title and metadata. |
| `.instui-name` | Criterion name or category. |
| `.instui-row` | Individual criterion row. |
| `.instui-score` | Score indicator or badge. |

## States

| State | Description |
| --- | --- |
| `:optional` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--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` | — | — |

## Related

* [card](/api/css/card.md)