---
url: /api/css.md
---
# CSS API reference

The CSS API reference covers pantoken's class-based component layer: components, utilities, global rules, and declarations built on the token system.

## Components

| Name | Class | Summary |
| --- | --- | --- |
| [agent-shell](/api/css/agent-shell.md) | `.instui-agent-shell` | A surface container for AI agents. |
| [alert](/api/css/alert.md) | `.instui-alert` | A status message with floating and inline surface treatments and a masked status glyph from the shared icon set. |
| [avatar](/api/css/avatar.md) | `.instui-avatar` | A user avatar showing initials or an image, circular by default. |
| [badge](/api/css/badge.md) | `.instui-badge` | A small count or status dot placed over a target's corner. |
| [banner](/api/css/banner.md) | `.instui-banner` | A dismissible, iconed message surface for page-level or in-context announcements. |
| [billboard](/api/css/billboard.md) | `.instui-billboard` | A large empty-state or call-to-action block: a hero icon or image, a heading, and a message. |
| [breadcrumb](/api/css/breadcrumb.md) | `.instui-breadcrumb` | A breadcrumb trail with separators; the last crumb is the current page. |
| [breadcrumb.link](/api/css/breadcrumb.link.md) | `li` | A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page. |
| [button](/api/css/button.md) | `.instui-button` | An accessible action control, styled from the token palette; primary by default. |
| [button-set](/api/css/button-set.md) | `.instui-button-set` | A non-wrapping, flush row of buttons joined by 1px seams, with only its outer two corners rounded. |
| [byline](/api/css/byline.md) | `.instui-byline` | A media object: a hero figure beside a title and description. |
| [calendar](/api/css/calendar.md) | `.instui-calendar` | A static month grid with navigation, weekday headers, and day cells. |
| [calendar.day](/api/css/calendar.day.md) | `.day` | A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state. |
| [card](/api/css/card.md) | `.instui-card` | A surface container that accepts arbitrary content. |
| [checkbox](/api/css/checkbox.md) | `.instui-checkbox` | A native checkbox and its label, or a switch via `-variant-toggle`. |
| [close-button](/api/css/close-button.md) | `.instui-close-button` | A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant. |
| [context-view](/api/css/context-view.md) | `.instui-context-view` | An elevated callout with a caret, positionable on any side; works as a native `[popover]`. |
| [drawer-layout](/api/css/drawer-layout.md) | `.instui-drawer-layout` | A split layout with a collapsible side tray and a primary scrollable content pane. |
| [drawer-layout.content](/api/css/drawer-layout.content.md) | `.content` | The primary content pane that fills remaining space beside the tray. |
| [drawer-layout.tray](/api/css/drawer-layout.tray.md) | `.tray` | The side panel beside main content, with optional overlay and tray-like surface modifiers. |
| [file-drop](/api/css/file-drop.md) | `.instui-file-drop` | A file dropzone with hover, accepted, and rejected states. |
| [form-field](/api/css/form-field.md) | `.instui-form-field` | A form-field wrapper: a label, its controls, and inline, required, or readonly layouts. |
| [form-field-group](/api/css/form-field-group.md) | `.instui-form-field-group` | A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing. |
| [form-field-messages](/api/css/form-field-messages.md) | `.instui-form-field-messages` | Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success. |
| [heading](/api/css/heading.md) | `.instui-heading` | Heading typography from `-level-h1` to `-level-h6`. |
| [img](/api/css/img.md) | `.instui-img` | A styled `<img>` with display, crop, and effect modifiers that stack. |
| [in-place-edit](/api/css/in-place-edit.md) | `.instui-in-place-edit` | A \[contenteditable] that reads as text until focused, then shows input chrome. |
| [input-group](/api/css/input-group.md) | `.instui-input-group` | A facade around a text input with leading and trailing icon slots. |
| [link](/api/css/link.md) | `.instui-link` | A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms. |
| [list](/api/css/list.md) | `.instui-list` | A list with token-driven item spacing. |
| [list.item](/api/css/list.item.md) | `.instui-list` | A list item (InstUI `List.Item`). |
| [mask](/api/css/mask.md) | `.instui-mask` | An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility. |
| [menu](/api/css/menu.md) | `.instui-menu` | A dropdown surface of items, groups, and separators. |
| [menu.group](/api/css/menu.group.md) | `.group` | A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`). |
| [menu.item](/api/css/menu.item.md) | `.item` | A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/\[aria-checked]. |
| [menu.separator](/api/css/menu.separator.md) | `.separator` | A divider rule between items (InstUI `Menu.Separator`). |
| [metric](/api/css/metric.md) | `.instui-metric` | A labelled statistic — a large value over a caption. |
| [modal](/api/css/modal.md) | `.instui-modal` | A dialog surface (works on a native \<dialog>); header/body/footer parts. |
| [modal.body](/api/css/modal.body.md) | `.body` | The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed. |
| [modal.footer](/api/css/modal.footer.md) | `.footer` | The actions row (InstUI `Modal.Footer`). |
| [modal.header](/api/css/modal.header.md) | `.header` | The title row (InstUI `Modal.Header`). |
| [number-input](/api/css/number-input.md) | `.instui-number-input` | A number-input facade with a +/- spinner column. |
| [pagination](/api/css/pagination.md) | `.instui-pagination` | Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps. |
| [pagination.page](/api/css/pagination.page.md) | `.page` | A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`. |
| [pill](/api/css/pill.md) | `.instui-pill` | A compact status label; add a leading glyph with the shared `-icon-<name>` form. |
| [popover](/api/css/popover.md) | `.instui-popover` | An elevated surface for a native `[popover]`, positioned with CSS anchor positioning. |
| [progress](/api/css/progress.md) | `.instui-progress` | A determinate progress bar with a coloured meter, sizes, and an optional value label. |
| [progress-circle](/api/css/progress-circle.md) | `.instui-progress-circle` | A circular progress ring driven by `--value` and `--value-max` custom properties. |
| [radio](/api/css/radio.md) | `.instui-radio` | A native radio button and its label. |
| [radio-input-group](/api/css/radio-input-group.md) | `.instui-radio-input-group` | A single-select radio `<fieldset>`, plain or as a connected segmented toggle. |
| [range-input](/api/css/range-input.md) | `.instui-range-input` | A styled range slider with an inverse value bubble. |
| [rating](/api/css/rating.md) | `.instui-rating` | A star rating with filled and empty glyphs and an optional numeric label. |
| [segmented-control](/api/css/segmented-control.md) | `.instui-segmented-control` | A single-select row of compact view or filter options. |
| [segmented-control.segment](/api/css/segmented-control.segment.md) | `.instui-segmented-control` | A selectable segmented-control label and its native radio input. |
| [side-nav-bar](/api/css/side-nav-bar.md) | `.instui-side-nav-bar` | A vertical navigation rail of icon-over-label items, with a minimized icons-only mode. |
| [side-nav-bar.item](/api/css/side-nav-bar.item.md) | `.item` | A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one. |
| [simple-select](/api/css/simple-select.md) | `.instui-simple-select` | A styled native `<select>` with a caret, matching the text-input states and sizes. |
| [skeleton-loader](/api/css/skeleton-loader.md) | `.instui-skeleton-loader` | Decorative placeholder for content that has not loaded yet. |
| [spinner](/api/css/spinner.md) | `.instui-spinner` | An animated loading ring or AI spinner; give it role="status" and an aria-label. |
| [table](/api/css/table.md) | `.instui-table` | A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts. |
| [table.body](/api/css/table.body.md) | `tbody` | The table's data row group (InstUI `Table.Body`). |
| [table.cell](/api/css/table.cell.md) | `td` | A data cell (InstUI `Table.Cell`). |
| [table.col-header](/api/css/table.col-header.md) | `th` | A column-header cell (InstUI `Table.ColHeader`); the default `th` styling, overridden by `table.row-header` for `th[scope="row"]`. |
| [table.head](/api/css/table.head.md) | `thead` | The table's header row group (InstUI `Table.Head`). |
| [table.row](/api/css/table.row.md) | `tr` | A table row (InstUI `Table.Row`). |
| [table.row-header](/api/css/table.row-header.md) | `th[scope="row"]` | A row-header cell (InstUI `Table.RowHeader`); styled from the row-header tokens, not the column-header ones. |
| [tabs](/api/css/tabs.md) | `.instui-tabs` | A tabbed panel set: a tab list, selectable tabs, and their panels. |
| [tabs.panel](/api/css/tabs.panel.md) | `.panel` | The content panel for a tab (InstUI `Tabs.Panel`). |
| [tabs.tab](/api/css/tabs.tab.md) | `.tab` | A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one. |
| [tag](/api/css/tag.md) | `.instui-tag` | An inline chip for a keyword or filter. |
| [text](/api/css/text.md) | `.instui-text` | Body-text typography with size, weight, colour, and style modifiers. |
| [text-area](/api/css/text-area.md) | `.instui-text-area` | A styled, resizable native `<textarea>` with the same states and sizes as the text input. |
| [text-input](/api/css/text-input.md) | `.instui-text-input` | A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes. |
| [toggle-details](/api/css/toggle-details.md) | `.instui-toggle-details` | A styled native `<details>` disclosure with a rotating chevron. |
| [toggle-group](/api/css/toggle-group.md) | `.instui-toggle-group` | A bordered disclosure built on `<details>`: a chevron summary row and collapsible content. |
| [tooltip](/api/css/tooltip.md) | `.instui-tooltip` | A CSS hover and focus tooltip bubble, positionable on any side. |
| [tray](/api/css/tray.md) | `.instui-tray` | An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`. |
| [tree-browser](/api/css/tree-browser.md) | `.instui-tree-browser` | A disclosure tree of nested collections and leaf items, with rotating chevrons. |
| [view](/api/css/view.md) | `.instui-view` | The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities. |

## Utilities

| Name | Class | Summary |
| --- | --- | --- |
| [ai-gradient](/api/css/ai-gradient.md) | `.--background-ai-horizontal` | AI-accent gradient helpers intended for custom surfaces, not the shared InstUI contract. |
| [color](/api/css/color.md) | `.--text-danger` | Semantic colour utilities: `.--bg-<name>`, `.--text-<name>` (aliased as `.--color-<name>`), and `.--border-<name>` for the curated semantic palette. Every one of these also has a component-attached alias modifier (for example `-bg-danger` on any `.instui-<component>`). |
| [cursor](/api/css/cursor.md) | `.--cursor-pointer` | `cursor` as a composable, global class — `.--cursor-<value>` — usable bare or chained onto any component (`.instui-button.--cursor-pointer`). |
| [gap](/api/css/gap.md) | `.--gap-md` | Flex/grid `gap` utilities on the spacing scale, short (`--gap-sm`) or long (`--gap-small`) spelling. Usable bare or chained onto any component (`.instui-view.--gap-sm`) — components that already set their own `gap` from a component-specific token may have it overridden. |
| [icon](/api/css/icon.md) | `.instui-icon` | The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element. |
| [layout](/api/css/layout.md) | `.--display-flex` | Display and text-align utilities — `.--display-<value>` and `.--text-align-<value>` — as composable, global classes, usable bare or chained onto any component. |
| [logo](/api/css/logo.md) | `.instui-logo` | The logo system: `.instui-logo` sizing plus the shared `-logo-<name>` painter that masks a product logo (in `currentColor`) before any element, preserving the logo's own aspect ratio instead of a fixed 1:1 box. |
| [maskglobal](/api/css/maskglobal.md) | `.--mask-overlay` | A global, dual copy of the `mask` component's overlay modifiers — `--mask-overlay`, `--mask-fullscreen`, `--mask-blur` — usable bare or chained onto any component, without wrapping in a `.instui-mask` element. |
| [overflow](/api/css/overflow.md) | `.--overflow-x-hidden` | `overflow-x`/`overflow-y` as composable, global classes — `.--overflow-x-<value>` / `.--overflow-y-<value>` — usable bare or chained onto any component. |
| [position](/api/css/position.md) | `.--position-relative` | `position` as a composable, global class — `.--position-<value>` — usable bare or chained onto any component (`.instui-button.--position-relative`). |
| [responsive](/api/css/responsive.md) | `[class*="-hidden-"],[class*="-show-"]` | Viewport- or container-width show/hide classes across a themed breakpoint scale. |
| [screen-reader-content](/api/css/screen-reader-content.md) | `.instui-screen-reader-content` | Visually hides content while keeping it available to assistive tech (the standard clip pattern). |
| [spacing](/api/css/spacing.md) | `.--p-md` | Margin and padding utilities — `.--m<side>-<step>` / `.--margin-<side>-<step>` and `.--p<side>-<step>` / `.--padding-<side>-<step>` on the spacing scale (sides `t`/`b`/`s`/`e`/`x`/`y` or none, spelled short or fully long — for example `--mb-sm` and `--margin-bottom-small` are the same rule; margin also takes `auto`). Usable bare or chained onto any component (for example `class="instui-view --mb-sm"`). |
| [stacking](/api/css/stacking.md) | `.--stack-topmost` | z-index depth utilities — `.--stack-<level>` (`deepest`, `below`, `above`, `topmost`) — usable bare or chained onto any component, so layers stack predictably instead of by hand-tuned numbers. |
| [transition](/api/css/transition.md) | `.instui-transition.-transition-fade-entering` | Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component. |
| [truncate](/api/css/truncate.md) | `.--truncate` | Ellipsis truncation with line clamping controlled by `--lines` — usable bare or chained onto any component (`.instui-button.--truncate`). |
| [visual-debug](/api/css/visual-debug.md) | `.-with-visual-debug` | A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance. |

## Rules

| Name | Class | Summary |
| --- | --- | --- |
| [base](/api/css/base.md) | `*` | The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults. |
| [prose](/api/css/prose.md) | `:where(body)` | Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — applied automatically wherever it's imported (default `:where(body)`); pass `options.scope` to target a different content root instead (e.g. `.vp-doc`). |

## Declarations

| Name | Class | Summary |
| --- | --- | --- |
| [breakpoints](/api/css/breakpoints.md) | `.breakpoints` | Extra-small viewport width for phone-sized previews. |

## Plugins

| Name | Class | Summary |
| --- | --- | --- |
| [logos](/api/css/logos.md) | `.logos` | Instructure product logos as CSS image tokens: `--instui-logo-<product>-<layout>-<mode>` holds a data-URI SVG, so a logo paints via e.g. `background-image: var(--instui-logo-canvas-horizontal-color)`. |
| [primitives](/api/css/primitives.md) | `.instui-bg-primitive-color-white` | Opt-in utility classes for the raw primitive palette: `.instui-bg-`/`fg-`/`border-primitive-color-<name>` paint a colour from the primitive colour tokens, plus `font-family`/`font-weight` utilities for the primitive font tokens. Kept out of the semantic utilities so overrides there stay semantic-only. |
| [visual-debug](/api/css/visual-debug.md) | `.-with-visual-debug` | A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance. |

## layout

| Name | Class | Summary |
| --- | --- | --- |
| [callout](/api/css/callout.md) | `div[class~="instui-callout"]` | Inline information alert for a short reminder or note. |
| [hero](/api/css/hero.md) | `div[class~="instui-hero"]` | Full-width header section with title, subtitle, and optional background image. |
| [page-layout](/api/css/page-layout.md) | `div[class~="instui-page-layout"]` | Standard three-column page layout with header, sidebar, and main content. |
| [rubric-note](/api/css/rubric-note.md) | `div[class~="instui-rubric-note"]` | Structured note with rubric categories and scoring indicators. |
| [testimonial](/api/css/testimonial.md) | `div[class~="instui-testimonial"]` | Quote or testimonial display with attribution and optional imagery. |
| [two-column](/api/css/two-column.md) | `div[class~="instui-two-column"]` | Two-column layout with left and right content regions. |
| [wrapper](/api/css/wrapper.md) | `body[class~="instui-display-flex"]` | App-shell row: side nav, container with header, and optional panel. |