# Iris CSS documentation

Every Iris CSS docs page in one file, for AI tools. Source: https://iriscss.com/documentation/

---

## Iris CSS: rules for AI assistants

Read this before you write HTML or CSS for a page that uses Iris CSS. Full docs: https://iriscss.com/llms.txt

### How Iris CSS works

- Plain semantic HTML is styled with no classes. Write the right element first: `button`, `form`, `label`, `table`, `dialog`, `details`, `nav`, `article`, `header`, `footer`.
- Classes are optional modifiers with no prefix: `.primary`, `.outlined`, `.large`. Add one only for a variant or a component that HTML has no element for.
- Custom properties carry the `--i-` prefix, such as `--i-color-primary` or `--i-spacing`. Change the look by overriding them, on `:root` for the whole page or on one element.
- Light and dark mode are automatic. `data-theme="light"` or `data-theme="dark"` (or the `.light` and `.dark` classes) forces a theme on any element and everything inside it.
- Every Iris rule is in a cascade layer, so plain CSS you write wins without `!important` or extra specificity.
- Interactive components use native HTML: `popover`, `dialog` with invoker commands, `details`. They need no JavaScript.

### Do not

- Do not use classes from other frameworks. `.btn`, `.btn-primary`, `.row`, `.col-md-6`, `.d-flex`, `.mt-3`, `.p-4`, `.text-gray-500`, `.navbar-nav`, `.form-control`, `.modal-dialog` and Tailwind utilities do nothing in Iris CSS.
- Do not invent classes. If a class is not listed below, it does not exist. Use plain CSS for anything else.
- Do not add classes to elements that are already styled. `<button>`, `<input>` and `<table>` need none.
- Do not write JavaScript to open modals, menus, popovers, tooltips, tabs or accordions. Use the native patterns below.
- Do not hand roll dark mode with `prefers-color-scheme` or a `.dark` stylesheet. Every Iris color already switches.
- Do not hardcode colors. Use a color class or a `--i-color-*` variable, so the color follows the theme.
- Do not wrap form controls in extra divs for spacing. Put the control inside its `label`.

### Starter page

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/iris.min.css">
    <title>Page title</title>
  </head>
  <body>
    <main class="container">
      <h1>Page title</h1>
    </main>
  </body>
</html>
```

### Classes

These are all the Iris CSS classes.

| Group | Classes |
|---|---|
| Layout | `.container` (centered, max width), `.container-fluid`, `.grid` (equal columns that wrap), `.span-full` (child of `.grid`), `.stack` (vertical gap), `.cluster` (wrapping row), `.with-sidebar` (two children, `.end` puts the sidebar last), `.switcher` (row that stacks when narrow), `.hero` |
| Colors | `.primary`, `.secondary`, `.contrast`, `.accent`, `.info`, `.success`, `.warning`, `.danger`, `.link`. On buttons and links they color the control, on other elements they set the background and text |
| Styles | `.outlined`, `.rounded`, `.square`, `.tint` and `.deep` (buttons), `.light`, `.dark` |
| Sizes | `.small`, `.medium`, `.large`. No class is the default size, and `.medium` is larger than the default |
| States | `.hover`, `.active`, `.focus`, `.disabled`, for previews only. Use the real `disabled` attribute in forms |
| Tables | `.striped`, `.hover`, `.sticky` on `table`, `.table-responsive` on a wrapper |
| Components | `.alert`, `.avatar`, `.avatar-group`, `.badge`, `.box`, `.breadcrumb`, `.card`, `.carousel`, `.close`, `.divider`, `.drawer` (`.start`, `.bottom`), `.dropdown`, `.select`, `.footer`, `.group`, `.icon`, `.icon-text`, `.navbar`, `.nav-toggle`, `.pagination`, `.skeleton`, `.steps`, `.tabs`, `.toast`, `.toasts`, `.sticky` |
| Brand | `.brand`, `.brand-name`, `.brand-accent` |
| Gradients | `.gradient` with a family class (`.blue`, `.emerald`...), `.to-top`, `.to-bottom`, `.to-left`, `.radial`, `.ellipse`, `.radial-top`, `.radial-right`, `.radial-bottom`, `.radial-left` |
| Palette | `.color-{family}-{shade}`, `.background-{family}-{shade}`. Families: amber, blue, chartreuse, cyan, emerald, fuchsia, gray, green, indigo, jade, lime, neutral, orange, pink, purple, red, rose, sky, slate, spring, stone, teal, vermilion, violet, yellow, zinc. Shades: 50, 100 to 900 by 100, 950 |
| Utilities | `.hidden`, `.block`, `.inline-block`, `.inline`, `.flex`, `.inline-flex`, `.contents`, `.visible`, `.invisible`, `.text-center`, `.justify-center`, `.items-center`, `.mx-auto`, `.overflow-auto`, `.overflow-x-auto`, `.overflow-y-auto`, `.overflow-hidden`, `.overflow-clip`, `.truncate`, `.line-clamp` |
| Accessibility | `.sr-only`, `.sr-only-focusable`, `.skip-to-content` |

There are no spacing, margin, padding, width or font size utilities. Use `.stack`, `.cluster` and `.grid` for spacing, or plain CSS with `var(--i-spacing)`.

### Attributes that change the look

| Attribute | Effect |
|---|---|
| `aria-busy="true"` | Loading spinner. On a button, add `aria-disabled="true"` too |
| `aria-invalid="true"` / `"false"` | Error or valid style on a field. Native validation (`required`, `type="email"`) shows errors with no attribute |
| `aria-current="page"` | Current link in a nav, navbar, pagination or breadcrumb. `aria-current="step"` in `.steps` |
| `aria-disabled="true"` | Disabled look on any element |
| `role="switch"` | On `input type="checkbox"`: a toggle switch |
| `role="button"` | On a link: looks like a button |
| `data-tooltip="Text"` | Tooltip on hover and focus. `data-placement="top|right|bottom|left"` sets the side |
| `popover` + `data-placement` | Popover anchored to the button that opens it |
| `data-theme="light|dark"` | Forces a theme on the element and everything inside it |

### Patterns

Forms: a control inside its `label`, helper text in a `small` right after the control, columns with `.grid`.

```html
<form>
  <div class="grid">
    <label>First name <input type="text" name="first" autocomplete="given-name"></label>
    <label>Last name <input type="text" name="last" autocomplete="family-name"></label>
  </div>
  <label>Email <input type="email" name="email" required aria-describedby="email-help"></label>
  <small id="email-help">We never share your email.</small>
  <label><input type="checkbox" role="switch" name="news" checked> Newsletter</label>
  <button type="submit" class="primary">Sign up</button>
</form>
```

Navbar: a `header.navbar` around a `nav`. The first list is the brand. The links list collapses behind the `.nav-toggle` on narrow screens.

```html
<header class="navbar sticky">
  <nav class="container" aria-label="Main">
    <ul>
      <li><a href="/"><img src="logo.svg" alt=""> Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu" aria-label="Menu"></button>
    <ul id="menu" popover>
      <li><a href="/docs/" aria-current="page">Docs</a></li>
      <li><a href="/pricing/">Pricing</a></li>
      <li><button class="primary">Sign in</button></li>
    </ul>
  </nav>
</header>
```

Footer: a wrapper whose first child holds the brand and the `nav` columns, then a bottom row.

```html
<footer class="footer">
  <div class="container">
    <div>
      <div><a href="/">Brand</a><p>Short tagline</p></div>
      <nav aria-label="Product">
        <h2>Product</h2>
        <ul><li><a href="/docs/">Docs</a></li><li><a href="/pricing/">Pricing</a></li></ul>
      </nav>
    </div>
    <div><p>&copy; 2026 Brand</p></div>
  </div>
</footer>
```

Card: a direct `header` and `footer` become tinted bands.

```html
<article class="card">
  <header><h3>Pro</h3></header>
  <p>Everything in Free, plus teams.</p>
  <footer><button class="primary">Choose</button></footer>
</article>
```

Modal and drawer: a `dialog` opened by invoker commands, no script. Add `class="drawer"` for a panel from the side.

```html
<button commandfor="confirm" command="show-modal">Delete</button>
<dialog id="confirm" closedby="any" aria-labelledby="confirm-title">
  <header>
    <button class="close" commandfor="confirm" command="close" aria-label="Close"></button>
    <h3 id="confirm-title">Delete project?</h3>
  </header>
  <p>This cannot be undone.</p>
  <footer>
    <button class="secondary" commandfor="confirm" command="close">Cancel</button>
    <button class="danger" commandfor="confirm" command="close">Delete</button>
  </footer>
</dialog>
```

Dropdown and popover: a `popover` element right after the button that opens it.

```html
<button popovertarget="account">Account</button>
<ul id="account" popover class="dropdown">
  <li><a href="/profile/">Profile</a></li>
  <li><a href="/logout/">Sign out</a></li>
</ul>

<button popovertarget="help">Help</button>
<div id="help" popover data-placement="bottom">Short help text.</div>
```

Accordion and tabs: `details` elements. A shared `name` keeps one open. Wrap them in `.tabs` for tabs.

```html
<div class="tabs">
  <details name="billing" open><summary>Monthly</summary><p>$9 a month.</p></details>
  <details name="billing"><summary>Yearly</summary><p>$90 a year.</p></details>
</div>
```

Toast: `popover="manual"`, opened with `popovertargetaction="show"` or `showPopover()`.

```html
<button popovertarget="saved" popovertargetaction="show">Save</button>
<div id="saved" class="toast success" popover="manual" role="status">
  <p>Your changes were saved.</p>
  <button class="close" popovertarget="saved" popovertargetaction="hide" aria-label="Close"></button>
</div>
```

Hero, alert, badge, joined controls, steps:

```html
<section class="hero">
  <h1>Build with plain HTML</h1>
  <p>Styled markup, no classes needed.</p>
  <div class="cluster justify-center">
    <a href="/start/" role="button" class="primary">Get started</a>
    <a href="/docs/" role="button" class="outlined">Docs</a>
  </div>
</section>

<div class="alert warning" role="alert">Your trial ends tomorrow.</div>
<h3>Inbox <span class="badge danger">4</span></h3>

<search>
  <form class="group" role="group">
    <input type="search" name="q" aria-label="Search">
    <button class="primary">Search</button>
  </form>
</search>

<ol class="steps">
  <li>Cart</li>
  <li aria-current="step">Payment</li>
  <li>Review</li>
</ol>
```

### Custom styles

Override variables instead of writing new rules where you can. A `light-dark()` pair gives each theme its own value.

```css
:root {
  --i-color-primary: light-dark(#6d28d9, #a78bfa);
  --i-color-primary-inverse: light-dark(#fff, #1e1b4b);
}

.pricing-card {
  --i-card-color-background: light-dark(#f5f3ff, #1e1b4b);
}
```

For a one off color on a button or link, set `--i-variant` and `--i-variant-inverse` on it. Every variable is listed in https://iriscss.com/reference/variables.md.

---

## Installation

Source: https://iriscss.com/documentation/overview/installation/

Grab the CSS file, or the source if you want to build your own.

Iris CSS is not published to npm yet. Until then, the CDN and npm options below will not work. Build it from source instead.

### Get the Iris CSS file

One `.css` file holds all of Iris CSS. It is plain CSS, so there is nothing to compile.

#### Option 1: use a CDN

Recommended. Import it from jsDelivr in your CSS, or link it in the `<head>` of your page.

**CSS `@import`**

```css
@import "https://cdn.jsdelivr.net/npm/iriscss@0.1.0/dist/iris.min.css";
```

**HTML `<link />`**

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iriscss@0.1.0/dist/iris.min.css">
```

There is no separate right to left build. Iris CSS uses logical properties, so `dir="rtl"` on the page is all it takes.

#### Option 2: download the GitHub release

Download `iris-0.1.0.zip` from the [GitHub releases](https://github.com/iriscss/iriscss/releases) page, copy `iris.min.css` into your project and link it.

```html
<link rel="stylesheet" href="css/iris.min.css">
```

#### Files

| File | Contents |
| --- | --- |
| `iris.css` | The full framework, readable |
| `iris.min.css` | The full framework, minified |

### Get the Iris CSS source

The source is a set of native CSS files, one per element or component. Use it to import only the parts you need or to build your own version.

#### Option 1: install the npm package

Recommended.

**npm**

```shell
npm install iriscss
```

**yarn**

```shell
yarn add iriscss
```

**pnpm**

```shell
pnpm add iriscss
```

The package ships the built files in `dist/` and the source in `src/`. Import the stylesheet from your bundler:

```css
@import "iriscss";
```

#### Option 2: clone the GitHub repository

Clone it with SSH, HTTPS or the GitHub CLI.

**SSH**

```shell
git clone git@github.com:iriscss/iriscss.git
```

**HTTPS**

```shell
git clone https://github.com/iriscss/iriscss.git
```

**GitHub CLI**

```shell
gh repo clone iriscss/iriscss
```

Then build it. You need Node.js 24 and npm. The stylesheets are written to `dist/`.

```shell
cd iriscss
npm install
npm run build
```

The repository also holds the tests and tooling, so it is larger than the npm package.

---

## Start

Source: https://iriscss.com/documentation/overview/start/

Link one stylesheet and write plain HTML.

### Starter template

Once Iris CSS is [installed](https://iriscss.com/documentation/overview/installation/index.html.md), this is all a page needs.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/iris.min.css">
    <title>Hello Iris!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello Iris!</h1>
    </main>
  </body>
</html>
```

### Key ideas

- **Classless first**: Forms, buttons, tables, cards, modals and navigation are styled from plain HTML.
- **Optional classes with no prefix**: Short modifiers like `.primary`, `.outlined` or `.large` work on most elements.
- **HTML and ARIA attributes**: `aria-busy="true"` shows a spinner, `aria-invalid="true"` marks a field with an error, `data-tooltip` adds a tooltip.
- **Light and dark mode**: Every color is a `light-dark()` pair. Iris follows the system setting, and `data-theme="light"` or `data-theme="dark"` forces a scheme on the page or on any element.
- **Your CSS wins**: Every Iris rule sits in a cascade layer, so your own styles override Iris without specificity tricks or `!important`.
- **Customize with variables**: Every value comes from a `--i-` custom property. Override it on `:root` to change it everywhere, or on one element to change it locally.

### Try it

Everything below is plain HTML with no classes.

```html
<article>
  <h3>Subscribe</h3>
  <form>
    <label>Name <input type="text" placeholder="Ada Lovelace"></label>
    <label><input type="checkbox" role="switch" checked> Weekly digest</label>
    <button type="submit">Subscribe</button>
  </form>
</article>
```

### Next steps

- [Classless HTML](https://iriscss.com/documentation/overview/classless-html/index.html.md) shows what plain markup looks like.
- [Colors](https://iriscss.com/documentation/modifiers/colors/index.html.md) and [sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md) cover the classes you will use most.
- [CSS variables](https://iriscss.com/documentation/customize/css-variables/index.html.md) and [themes](https://iriscss.com/documentation/customize/themes/index.html.md) explain how to make it your own.

---

## Classless HTML

Source: https://iriscss.com/documentation/overview/classless-html/

Write semantic HTML and it is styled. Classes are only for variants.

Everything on this page is plain HTML with no class. Each element has its own page with the details and variants.

### Page structure

`body` has no margin. A `header`, `main` or `footer` directly in `body` gets vertical padding, and each `section` gets space below it. Wrap the content in a [container](https://iriscss.com/documentation/layout/container-and-grid/index.html.md) to center it.

```html
<body>
  <header class="container">...</header>
  <main class="container">
    <section>...</section>
    <section>...</section>
  </main>
  <footer class="container">...</footer>
</body>
```

### Text

```html
<hgroup>
  <h3>An article title</h3>
  <p>With a subtitle under it</p>
</hgroup>
<p>
  A paragraph with <strong>strong</strong>, <em>emphasis</em>,
  <a href="#">a link</a>, <mark>highlighted</mark> text and
  <code>inline code</code>. Press <kbd>Ctrl</kbd> to continue.
</p>
<blockquote>
  <p>A quote set apart from the text.</p>
  <footer><cite>Someone wise</cite></footer>
</blockquote>
<ul>
  <li>A list item</li>
  <li>Another item</li>
</ul>
```

See [typography](https://iriscss.com/documentation/elements/typography/index.html.md), [list](https://iriscss.com/documentation/elements/list/index.html.md) and [code](https://iriscss.com/documentation/elements/code/index.html.md).

### Forms

```html
<form>
  <label>Email <input type="email" placeholder="ada@example.com"></label>
  <label>Plan
    <select>
      <option>Free</option>
      <option>Pro</option>
    </select>
  </label>
  <label><input type="checkbox" role="switch" checked> Send me updates</label>
  <button type="submit">Sign up</button>
</form>
```

See [controls](https://iriscss.com/documentation/form/controls/index.html.md), [checkbox, radio and switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md) and [validation](https://iriscss.com/documentation/form/validation/index.html.md).

### Tables, progress and media

```html
<table>
  <thead>
    <tr><th scope="col">Task</th><th scope="col">Done</th></tr>
  </thead>
  <tbody>
    <tr><td>Design</td><td>100%</td></tr>
    <tr><td>Build</td><td>60%</td></tr>
  </tbody>
</table>
<progress value="60" max="100"></progress>
<figure>
  <img src="/android-chrome-192x192.png" alt="Iris CSS logo" width="96" height="96">
  <figcaption>A figure with a caption.</figcaption>
</figure>
```

See [table](https://iriscss.com/documentation/elements/table/index.html.md), [progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md) and [media](https://iriscss.com/documentation/elements/media/index.html.md).

### Interactive elements

`details` is an accordion, `dialog` a modal, an element with `popover` a popover, and `nav` a row of links. None of them need JavaScript.

```html
<details>
  <summary>What is in the box?</summary>
  <p>Plain HTML, styled.</p>
</details>
<nav aria-label="Classless example">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
```

See [accordion](https://iriscss.com/documentation/components/accordion/index.html.md), [modal](https://iriscss.com/documentation/components/modal/index.html.md), [popover](https://iriscss.com/documentation/elements/popover/index.html.md) and [nav](https://iriscss.com/documentation/components/nav/index.html.md).

### When to add a class

Add a class when you want a variant, such as `.primary` or `.large`, or a pattern HTML has no element for, such as `.card` or `.badge`. Start with [colors](https://iriscss.com/documentation/modifiers/colors/index.html.md) and [sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md).

---

## Cascade layers

Source: https://iriscss.com/documentation/overview/cascade-layers/

Every Iris CSS rule sits in a cascade layer, so your own styles win without specificity tricks.

CSS that is not in a layer always beats CSS that is. Write your styles as usual and they override Iris CSS, whatever the selector. A plain `button` rule of yours beats `button.primary.outlined` from Iris CSS.

```css
/* Your stylesheet, loaded after Iris CSS or before it */
button {
  border-radius: 0;
}
```

### Layer order

Inside Iris CSS, a later layer wins over an earlier one.

| Layer | Holds |
| --- | --- |
| `iris.variables` | Every `--i-` custom property |
| `iris.base` | Themes, document defaults, landmarks, color class fills and the default focus ring |
| `iris.elements` | Typography, lists, links, buttons, tables, media, code, progress, meter and popover |
| `iris.forms` | Inputs, selects, textareas, checkboxes, radios, switches and special inputs |
| `iris.components` | Cards, modals, navbars and every other component |
| `iris.layout` | Container, grid, primitives, `menu` and hero. After the components, so a primitive's gap replaces the margins of what it holds |
| `iris.modifiers` | Color, size, style and state classes |
| `iris.utilities` | Display, alignment, overflow, palette, gradients and `.sr-only` |
| `iris.accessibility` | ARIA states, high contrast and user preferences |
| `iris.print` | Print styles |

That is why `.large` beats a component's own size, and a utility such as `.hidden` beats both.

### Your own layers

If you use layers yourself, declare the order once. Layers listed later win, so put Iris CSS first.

```css
@layer iris, reset, app;
@import url("iris.min.css") layer(iris);
```

Iris CSS already names its layers `iris.*`, so listing `iris` first places all of them before yours.

---

## Browser support

Source: https://iriscss.com/documentation/overview/browser-support/

Iris CSS supports every browser released since early 2023. Newer features degrade without breaking the page.

| Browser | Version |
| --- | --- |
| Chrome and Edge | 111 and later |
| Firefox | 113 and later |
| Safari, desktop and iOS | 16.2 and later |
| Opera | 97 and later |
| Samsung Internet | 22 and later |

The floor is set by `color-mix()`, which Iris CSS uses to derive hover, border and tint colors. The build adds the vendor prefixes these versions need, and a fallback for browsers without `light-dark()`.

### Newer features

Some features need a newer browser. Without it, the page still works and looks right, with a simpler version.

| Feature | Without support |
| --- | --- |
| [Popover](https://iriscss.com/documentation/elements/popover/index.html.md) API | Popover content shows in place as normal content, and nav links stay in the bar with no menu button |
| Anchor positioning | Popovers stay centered, and the navbar menu opens at a fixed distance from the top |
| `::details-content` | Accordions open without animating and [tabs](https://iriscss.com/documentation/components/tabs/index.html.md) show as an accordion |
| Scroll buttons and markers | The [carousel](https://iriscss.com/documentation/components/carousel/index.html.md) scrolls with a scrollbar, without buttons and dots |
| Customizable select | Selects use the native option list |
| `field-sizing` | Textareas keep a fixed height |
| `text-box` | Badge text centers on the line box instead of the capitals |
| Invoker commands | `command` buttons do nothing, so open [modals](https://iriscss.com/documentation/components/modal/index.html.md#script) from a script |

---

## AI assistants

Source: https://iriscss.com/documentation/overview/ai-assistants/

Give your assistant the Iris CSS rules, so it writes plain HTML with Iris classes instead of guessing Bootstrap or Tailwind ones.

Without context, an assistant falls back on the frameworks it saw most, and writes classes such as `.btn` or `.mt-3` that do nothing in Iris CSS. One file fixes that: it lists every Iris class and attribute, the markup for each component and the mistakes to avoid.

### Files

| File | Use it for |
| --- | --- |
| [`/ai/iris-usage.md`](https://iriscss.com/ai/iris-usage.md) | Rules for assistants: every class, the component markup and what not to do. About 3,000 tokens, small enough to load in every session. |
| [`/llms.txt`](https://iriscss.com/llms.txt) | An index of the docs in the [llms.txt](https://llmstxt.org) format, for tools that look it up. |
| [`/llms-full.txt`](https://iriscss.com/llms-full.txt) | The rules, every docs page and the full reference in one file, for a chat or a long context. |
| `index.html.md` | A Markdown copy of each docs page, at the page URL plus `index.html.md`. This page is at [`/documentation/overview/ai-assistants/index.html.md`](https://iriscss.com/documentation/overview/ai-assistants/index.html.md). |

### Add the rules to your project

Save the rules file in your project, so the assistant reads it without network access and it matches the Iris version you use.

```shell
curl -o iris-usage.md https://iriscss.com/ai/iris-usage.md
```

Once you install the npm package, the same file is at `node_modules/iriscss/ai/iris-usage.md`.

Then point your tool at it.

#### AGENTS.md

Codex, Cursor, Copilot, Windsurf, Zed and other tools read `AGENTS.md` at the project root.

```
This project uses Iris CSS. Before you write HTML or CSS, read `iris-usage.md` and follow it.
```

#### Claude Code and Gemini CLI

An `@` line in `CLAUDE.md` or `GEMINI.md` loads the file into every session.

```
@iris-usage.md
```

#### Cursor

A project rule in `.cursor/rules/iris.mdc` loads the file when you work on markup.

```css
---
description: Iris CSS markup and class rules
globs: "**/*.{html,vue,svelte,jsx,tsx,astro,php}"
alwaysApply: false
---

@iris-usage.md
```

#### GitHub Copilot

Copilot reads `.github/copilot-instructions.md`. Point it at the file, or paste the file content there.

```
This project uses Iris CSS. Before you write HTML or CSS, read `iris-usage.md` and follow it.
```

#### Chat assistants

In a chat, attach `llms-full.txt` or paste its link, then describe the page you want.

### Crawlers

The site allows every crawler in `robots.txt` and lists each page in `sitemap.xml`. The docs can be used for AI training, attribution is appreciated.

---

## CSS variables

Source: https://iriscss.com/documentation/customize/css-variables/

Every value in Iris CSS comes from a `--i-` custom property. Change one and everything that reads it follows.

Classes have no prefix, but custom properties are global and inherited. The `--i-` prefix keeps them clear of your own variables and of other libraries.

### Change a value everywhere

Set the variable on `:root` in your own stylesheet. It wins over Iris without `!important`, see [cascade layers](https://iriscss.com/documentation/overview/cascade-layers/index.html.md).

```css
:root {
  --i-border-radius: 0.5rem;
  --i-spacing: 1.25rem;
  --i-font-family: "Inter", var(--i-font-sans);
}
```

### Change a value in one place

Set it on any element. Only that element and its children see the new value.

```html
<div class="cluster" style="--i-border-radius: 0; --i-color-primary: #7c3aed; --i-color-primary-inverse: #fff">
  <button class="primary">Square and violet</button>
  <input type="text" placeholder="Square input" aria-label="Example">
</div>
```

### Theme colors

Colors that change with the theme are `light-dark()` pairs. Override them with a pair of your own, or with one value to use it in both themes. See [themes](https://iriscss.com/documentation/customize/themes/index.html.md) for the full list.

```css
:root {
  --i-color-primary: light-dark(#6d28d9, #a78bfa);
}
```

### Naming

- **Owner first**: `--i-{owner}-{part}-{state}-{property}`, for example `--i-navbar-brand-font-size` or `--i-table-row-hover-color-background`. Part and state are optional.
- **Colors end in a role**: `color-text`, `color-background`, `color-border` or `color-outline`, for example `--i-input-color-border`.
- **Global tokens start with a category**: `--i-color-primary`, `--i-font-family`, `--i-spacing`, `--i-border-radius`. Many elements read them.
- **Private variables**: Names that start with `--_` switch values inside one element. They are not part of the API and can change at any time.

### Global variables

The tokens below are read across the framework. Each element and component page ends with a table of its own variables.

#### Typography

| Variable | Default | Note |
| --- | --- | --- |
| `--i-font-emoji` | `"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji Mozilla", "Noto Color Emoji"` | Font stacks: each platform's system font, then generic fallbacks |
| `--i-font-sans` | `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif, var(--i-font-emoji)` |  |
| `--i-font-mono` | `ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Liberation Mono", "Courier New", monospace, var(--i-font-emoji)` |  |
| `--i-font-family` | `var(--i-font-sans)` |  |
| `--i-line-height` | `1.5` | Base text. The root size starts at the size the user set in the browser and grows to 112.5% between a 576px and a 1280px wide viewport. |
| `--i-font-weight` | `400` |  |
| `--i-font-size` | `clamp(100%, 89.75% + 0.285svw, 112.5%)` |  |
| `--i-text-underline-offset` | `0.125em` |  |

#### Spacing

| Variable | Default |
| --- | --- |
| `--i-spacing` | `1rem` |
| `--i-typography-spacing` | `1rem` |
| `--i-section-spacing-block` | `var(--i-spacing)` |
| `--i-section-spacing-inline` | `var(--i-spacing)` |

#### Borders

| Variable | Default | Note |
| --- | --- | --- |
| `--i-border-radius-small` | `0.125rem` | Border radius scale |
| `--i-border-radius` | `0.25rem` |  |
| `--i-border-radius-medium` | `0.375rem` |  |
| `--i-border-radius-large` | `0.5rem` |  |
| `--i-border-radius-xlarge` | `0.75rem` |  |
| `--i-border-radius-pill` | `9999px` |  |
| `--i-border-width` | `0.0625rem` | Border widths |
| `--i-focus-ring-width` | `0.125rem` |  |

#### Motion

| Variable | Default | Note |
| --- | --- | --- |
| `--i-duration` | `0.2s` | Transitions |
| `--i-easing` | `ease-in-out` |  |

#### Icons

SVG data URIs with the color baked in. Replace the whole value to change an icon or its color.

| Variable | Default |
| --- | --- |
| `--i-svg-checkmark` | `url("data:image/svg+xml,…")` |
| `--i-svg-chevron-down` | `url("data:image/svg+xml,…")` |
| `--i-svg-close` | `url("data:image/svg+xml,…")` |
| `--i-svg-dash` | `url("data:image/svg+xml,…")` |
| `--i-svg-date` | `url("data:image/svg+xml,…")` |
| `--i-svg-invalid` | `url("data:image/svg+xml,…")` |
| `--i-svg-loading` | `url("data:image/svg+xml,…")` |
| `--i-svg-menu` | `url("data:image/svg+xml,…")` |
| `--i-svg-search` | `url("data:image/svg+xml,…")` |
| `--i-svg-time` | `url("data:image/svg+xml,…")` |
| `--i-svg-valid` | `url("data:image/svg+xml,…")` |

---

## Themes

Source: https://iriscss.com/documentation/customize/themes/

Iris CSS follows the system light or dark setting. `data-theme` forces either one, on the page or on any element.

Every theme color is a `light-dark()` pair, and `:root` sets `color-scheme: light dark`. The browser picks the side that matches the user's setting, so dark mode needs no extra CSS. Add the `color-scheme` meta tag too, so the page background is right before the stylesheet loads.

```html
<meta name="color-scheme" content="light dark">
```

### Force a theme

Set `data-theme` on `<html>` to choose the theme for the whole page.

```html
<html lang="en" data-theme="dark">
```

### Theme one element

`data-theme` works on any element. The element repaints its text and background, and everything inside follows, nested themes included. The `.light` and `.dark` classes do the same.

```html
<div class="grid">
  <article class="card" data-theme="light">
    <h4>Light</h4>
    <p>Always light.</p>
    <button class="primary">Primary</button>
  </article>
  <article class="card" data-theme="dark">
    <h4>Dark</h4>
    <p>Always dark.</p>
    <button class="primary">Primary</button>
  </article>
</div>
```

### Theme toggle

A toggle only has to set `data-theme` and remember it. Read the saved value in the `<head>`, before the page paints, so it does not flash the wrong theme. This site uses the same script.

```html
<script>
  try {
    const theme = localStorage.getItem("theme");
    if (theme) document.documentElement.dataset.theme = theme;
  } catch {}
</script>

<button type="button" id="theme-toggle">Toggle theme</button>
<script>
  document.getElementById("theme-toggle").addEventListener("click", () => {
    const root = document.documentElement;
    const dark = root.dataset.theme
      ? root.dataset.theme === "dark"
      : matchMedia("(prefers-color-scheme: dark)").matches;
    root.dataset.theme = dark ? "light" : "dark";
    localStorage.setItem("theme", root.dataset.theme);
  });
</script>
```

### Your own theme colors

Override a theme color with your own `light-dark()` pair. A single color, without `light-dark()`, is used in both themes. A color set on `:root` reaches nested themes too. Browsers without `light-dark()` (Chrome before 123, Firefox before 120, Safari before 17.5) recompute colors on each nested theme, so there set it on `:root, [data-theme], .light, .dark` to cover them.

```css
:root {
  --i-color-background: light-dark(#fffdf7, #101418);
  --i-color-primary: light-dark(#6d28d9, #a78bfa);
  --i-color-primary-inverse: light-dark(#fff, #1e1b4b);
}
```

Each color family is a color and an `-inverse` color, the text that sits on top of it. Hover, border and focus colors are mixed from these two, so you never set them one by one. See [colors](https://iriscss.com/documentation/modifiers/colors/index.html.md) for the classes that use them.

---

## Color palette

Source: https://iriscss.com/documentation/customize/color-palette/

26 color families with 11 shades each, from 50 (lightest) to 950 (darkest). The palette is the same in both themes.

Each shade is a variable, `--i-color-{family}-{shade}`. Hover a swatch to see its name. White and black are `--i-color-white` and `--i-color-black`.

| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| red | #fef2f2 | #ffe2e2 | #ffc9c9 | #ffa2a2 | #ff6467 | #fb2c36 | #e7000b | #c10007 | #9f0712 | #82181a | #460809 |
| rose | #fff1f2 | #ffe4e6 | #ffccd3 | #ffa1ad | #ff637e | #ff2056 | #ec003f | #c70036 | #a50036 | #8b0836 | #4d0218 |
| pink | #fdf2f8 | #fce7f3 | #fccee8 | #fda5d5 | #fb64b6 | #f6339a | #e60076 | #c6005c | #a3004c | #861043 | #510424 |
| fuchsia | #fdf4ff | #fae8ff | #f6cfff | #f4a8ff | #ed6aff | #e12afb | #c800de | #a800b7 | #8a0194 | #721378 | #4b004f |
| purple | #faf5ff | #f3e8ff | #e9d4ff | #dab2ff | #c27aff | #ad46ff | #9810fa | #8200db | #6e11b0 | #59168b | #3c0366 |
| violet | #f5f3ff | #ede9fe | #ddd6ff | #c4b4ff | #a684ff | #8e51ff | #7f22fe | #7008e7 | #5d0ec0 | #4d179a | #2f0d68 |
| indigo | #eef2ff | #e0e7ff | #c6d2ff | #a3b3ff | #7c86ff | #615fff | #4f39f6 | #432dd7 | #372aac | #312c85 | #1e1a4d |
| blue | #eff6ff | #dbeafe | #bedbff | #8ec5ff | #51a2ff | #2b7fff | #155dfc | #1447e6 | #193cb8 | #1c398e | #162456 |
| sky | #f0f9ff | #dff2fe | #b8e6fe | #74d4ff | #00bcff | #00a6f4 | #0084d1 | #0069a8 | #00598a | #024a70 | #052f4a |
| cyan | #ecfeff | #cefafe | #a2f4fd | #53eafd | #00d3f2 | #00b8db | #0092b8 | #007595 | #005f78 | #104e64 | #053345 |
| teal | #f0fdfa | #cbfbf1 | #96f7e4 | #46ecd5 | #00d5be | #00bba7 | #009689 | #00786f | #005f5a | #0b4f4a | #022f2e |
| emerald | #ecfdf5 | #d0fae5 | #a4f4cf | #5ee9b5 | #00d492 | #00bc7d | #096 | #007a55 | #006045 | #004f3b | #002c22 |
| jade | #eefdf5 | #d6fbe6 | #aff6cf | #6dedaf | #03da82 | #00c367 | #00a052 | #007e46 | #01633b | #075233 | #022d1c |
| green | #f0fdf4 | #dcfce7 | #b9f8cf | #7bf1a8 | #05df72 | #00c950 | #00a63e | #008236 | #016630 | #0d542b | #032e15 |
| spring | #f4feee | #e4fcd9 | #c9f9b4 | #9bf37d | #50e339 | #3ecc28 | #2fa61f | #25801b | #1f6518 | #21541d | #0e2e0c |
| lime | #f7fee7 | #ecfcca | #d8f999 | #bbf451 | #9ae600 | #7ccf00 | #5ea500 | #497d00 | #3c6300 | #35530e | #192e03 |
| chartreuse | #fbfde8 | #f5fbc6 | #ecf58f | #ddea39 | #ccd700 | #b6c000 | #979600 | #786e00 | #635700 | #54490c | #2e2704 |
| yellow | #fefce8 | #fef9c2 | #fff085 | #ffdf20 | #fdc700 | #f0b100 | #d08700 | #a65f00 | #894b00 | #733e0a | #432004 |
| amber | #fffbeb | #fef3c6 | #fee685 | #ffd230 | #ffb900 | #fe9a00 | #e17100 | #bb4d00 | #973c00 | #7b3306 | #461901 |
| vermilion | #fff5ef | #ffe8da | #ffd0b6 | #ffae83 | #ff7831 | #fd4e18 | #ef2805 | #c61d03 | #9f1c08 | #802212 | #450e07 |
| orange | #fff7ed | #ffedd4 | #ffd6a7 | #ffb86a | #ff8904 | #ff6900 | #f54900 | #ca3500 | #9f2d00 | #7e2a0c | #441306 |
| stone | #fbfaf8 | #f6f5f3 | #e9e5e2 | #d8d3cf | #a89f98 | #7c7068 | #5a524a | #473f38 | #2b2522 | #1e1916 | #0d0a08 |
| neutral | #fafafa | #f5f5f5 | #e5e5e5 | #d4d4d4 | #a1a1a1 | #737373 | #525252 | #404040 | #262626 | #171717 | #0a0a0a |
| zinc | #fafafa | #f4f4f6 | #e4e3e9 | #d5d3da | #a09eab | #72707d | #53515e | #403e48 | #28262c | #18181c | #09090b |
| gray | #f9fafb | #f2f4f7 | #e4e6ed | #d0d4de | #97a0b2 | #687185 | #485468 | #344056 | #1d283b | #0f172a | #030713 |
| slate | #f8fafc | #f0f4fa | #e0e7f2 | #c8d4e5 | #8e9fbc | #607291 | #43536f | #2f3f5b | #1c2840 | #0e162d | #020619 |

### Base colors

`--i-color-{family}` without a shade is the 500 shade, for example `--i-color-blue`. Theme colors are built from the palette: `--i-color-info` is `--i-color-cyan` and `--i-color-danger` is `--i-color-red-600`.

```css
.tag {
  color: var(--i-color-teal-800);
  background-color: var(--i-color-teal-100);
}
```

### Text and background classes

`.color-{family}-{shade}` sets the text color and `.background-{family}-{shade}` the background. They sit in the utilities layer, so they win over component styles.

```html
<p class="color-emerald-600">Emerald 600 text</p>
<p class="color-rose-500">Rose 500 text</p>
<p class="background-amber-100 color-amber-900">Amber 900 on amber 100</p>
<p class="background-indigo-700 color-indigo-50">Indigo 50 on indigo 700</p>
```

---

## Typography

Source: https://iriscss.com/documentation/elements/typography/

Headings, paragraphs, quotes and inline text, styled with no class.

The root font size starts at the size the user set in the browser and grows to 112.5% between a 576px and a 1280px wide viewport. Everything sized in `rem` grows with it.

### Headings

Each level has its own size, color and space above. A heading that follows other content gets extra space on top, so sections stay apart.

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

### Heading group

`hgroup` joins a heading and a subtitle. The last line turns subtle.

```html
<hgroup>
  <h3>Release notes</h3>
  <p>Everything that changed in version 2.</p>
</hgroup>
```

### Inline text

Inline elements keep their meaning and get a matching look. Paragraphs and list items avoid a single word on the last line where the browser supports `text-wrap: pretty`.

```html
<p>
  <strong>Strong</strong>, <b>bold</b>, <em>emphasis</em>, <i>italic</i>,
  <u>underline</u>, <s>strikethrough</s>, <small>small</small>,
  <mark>highlighted</mark>, <ins>inserted</ins>, <del>deleted</del>,
  <abbr title="Cascading Style Sheets">CSS</abbr>, H<sub>2</sub>O and
  E = mc<sup>2</sup>.
</p>
```

### Blockquote

A `footer` inside the quote holds the source.

```html
<blockquote>
  <p>Simplicity is prerequisite for reliability.</p>
  <footer><cite>Edsger W. Dijkstra</cite></footer>
</blockquote>
```

### Address and rule

```html
<address>
  Iris CSS<br>
  <a href="mailto:hello@example.com">hello@example.com</a>
</address>
<hr>
<p>Text after a horizontal rule.</p>
```

### Math

MathML uses a math font where one is installed.

```html
<p>
  <math><mi>a</mi><mo>=</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>+</mo><msup><mi>c</mi><mn>2</mn></msup></msqrt></math>
</p>
```

---

## Link

Source: https://iriscss.com/documentation/elements/link/

Links take their color from the color classes and mix it toward the text color, so they stay readable.

A link without a class uses the neutral base color. It underlines on hover and shows a focus ring for keyboard users. `role="link"` gets the same look.

```html
<p>Read the <a href="#">getting started guide</a> first.</p>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes only the text color, never the background.

```html
<p>
  <a href="#" class="primary">Primary</a> &middot;
  <a href="#" class="secondary">Secondary</a> &middot;
  <a href="#" class="contrast">Contrast</a> &middot;
  <a href="#" class="accent">Accent</a> &middot;
  <a href="#" class="info">Info</a> &middot;
  <a href="#" class="success">Success</a> &middot;
  <a href="#" class="warning">Warning</a> &middot;
  <a href="#" class="danger">Danger</a> &middot;
  <a href="#" class="link">Link</a>
</p>
```

### States and current page

`aria-current` marks the current page or item with the hover look. `.hover`, `.active` and `.focus` show a state without interaction, and `.disabled` fades the link and blocks clicks.

```html
<p>
  <a href="#" aria-current="page">Current page</a> &middot;
  <a href="#" class="hover">Hover</a> &middot;
  <a href="#" class="focus">Focus</a> &middot;
  <a class="disabled" aria-disabled="true">Disabled</a>
</p>
```

### Link as a button

`role="button"` turns a link into a [button](https://iriscss.com/documentation/elements/button/index.html.md).

```html
<a href="#" role="button" class="primary">Get started</a>
```

---

## List

Source: https://iriscss.com/documentation/elements/list/

Unordered, ordered and description lists, plus `menu` as a toolbar.

### Unordered

Markers change at each level: square, disc, then circle.

```html
<ul>
  <li>Elements
    <ul>
      <li>Button
        <ul>
          <li>Colors</li>
          <li>Sizes</li>
        </ul>
      </li>
      <li>Table</li>
    </ul>
  </li>
  <li>Components</li>
</ul>
```

### Ordered

```html
<ol>
  <li>Link the stylesheet</li>
  <li>Write HTML</li>
  <li>Add a class when you want a variant</li>
</ol>
```

### Description list

```html
<dl>
  <dt>Classless</dt>
  <dd>Plain HTML is styled with no class.</dd>
  <dt>Layered</dt>
  <dd>Your own CSS always wins.</dd>
</dl>
```

### Menu

`menu` is a toolbar. Its items sit in a row and wrap when there is no room.

```html
<menu>
  <li><button class="small">Copy</button></li>
  <li><button class="small">Paste</button></li>
  <li><button class="small danger">Delete</button></li>
</menu>
```

---

## Button

Source: https://iriscss.com/documentation/elements/button/

Every `button` is styled with no class. Color, style, size and state classes combine freely.

Iris styles `button`, `input[type="submit"]`, `input[type="reset"]`, `input[type="button"]` and anything with `role="button"`, including links.

```html
<button>Button</button>
<a href="#" role="button">Link</a>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
```

### Colors

A color class sets `--i-variant` and `--i-variant-inverse`. The button builds its background, border, text and focus ring from them.

```html
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>
<button class="accent">Accent</button>
<button class="info">Info</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
<button class="link">Link</button>
```

For a color outside the list, set the two variables yourself.

```html
<button style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Custom</button>
```

### Styles

`.outlined` keeps only the border and text. `.tint` is a pale tint and `.deep` a deep shade, the same in both themes.

```html
<button class="primary outlined">Outlined</button>
<button class="danger outlined">Outlined</button>
<button class="primary tint">Tint</button>
<button class="danger tint">Tint</button>
<button class="primary deep">Deep</button>
<button class="danger deep">Deep</button>
```

`.rounded` gives pill corners and `.square` removes them.

```html
<button class="info rounded">Rounded</button>
<button class="info">Default</button>
<button class="info square">Square</button>
```

### Sizes

The default size needs no class. `.medium` is larger than the default.

```html
<button class="accent small">Small</button>
<button class="accent">Default</button>
<button class="accent medium">Medium</button>
<button class="accent large">Large</button>
```

### States

`.hover`, `.active` and `.focus` show a state without interaction, for previews and docs. `disabled`, `aria-busy="true"` and `aria-current` work as attributes. A button with `aria-current` keeps the hover look, for the selected item in a toolbar.

```html
<button class="success">Normal</button>
<button class="success hover">Hover</button>
<button class="success active">Active</button>
<button class="success focus">Focus</button>
<button class="success" aria-current="true">Current</button>
<button class="success" disabled>Disabled</button>
<button class="success" aria-busy="true">Loading</button>
```

### File input

The picker button of a file input is a secondary button.

```html
<input type="file" aria-label="Upload a file">
```

### Group

`.group` joins buttons into one control. See [group](https://iriscss.com/documentation/form/group/index.html.md) for inputs and search bars.

```html
<div class="group" role="group">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</div>
```

---

## Code

Source: https://iriscss.com/documentation/elements/code/

`code`, `pre`, `kbd`, `samp` and `var`, styled with no class.

### Inline code

Inline code wraps with the text. Each wrapped line keeps its own padding and corners.

```html
<p>Run <code>npm run build</code> and open <code>dist/index.html</code>.</p>
```

### Code block

Put `code` inside `pre` for a block that keeps line breaks and scrolls sideways.

```html
<pre><code>:root {
  --i-color-primary: #7c3aed;
}</code></pre>
```

### Keyboard

Nest `kbd` elements for a key combination. The outer one stays plain.

```html
<p>Press <kbd>Esc</kbd> to close, or <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> to copy.</p>
```

### Sample and variable

`samp` shows program output. `var` names a variable and keeps the text font.

```html
<p>The build prints <samp>Built 57 pages into dist</samp>.</p>
<p>The area is <var>width</var> times <var>height</var>.</p>
```

### Light

Code is dark in both themes. `.light` switches it to light colors.

```html
<p>Set <code class="light">data-theme</code> on any element.</p>
<pre class="light"><code>&lt;html data-theme="dark"&gt;</code></pre>
```

### Rounded and square

```html
<p><code class="rounded">.rounded</code> and <code class="square">.square</code></p>
```

---

## Table

Source: https://iriscss.com/documentation/elements/table/

Tables are full width with header, body and footer lines. Add a class for stripes, hover or a sticky header.

```html
<table>
  <caption>Plans</caption>
  <thead>
    <tr><th scope="col">Plan</th><th scope="col">Projects</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Free</th><td>3</td><td>$0</td></tr>
    <tr><th scope="row">Pro</th><td>Unlimited</td><td>$12</td></tr>
    <tr><th scope="row">Team</th><td>Unlimited</td><td>$40</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Billed</th><td colspan="2">Monthly</td></tr>
  </tfoot>
</table>
```

Cells use even digit widths, so number columns line up.

### Striped

```html
<table class="striped">
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Ada</td><td>Engineer</td></tr>
    <tr><td>Grace</td><td>Admiral</td></tr>
    <tr><td>Alan</td><td>Mathematician</td></tr>
    <tr><td>Linus</td><td>Maintainer</td></tr>
  </tbody>
</table>
```

### Hover

`.hover` highlights the row under the pointer.

```html
<table class="hover">
  <thead>
    <tr><th scope="col">Order</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>#1042</td><td>Shipped</td></tr>
    <tr><td>#1043</td><td>Packing</td></tr>
    <tr><td>#1044</td><td>Paid</td></tr>
  </tbody>
</table>
```

### Sticky header

`.sticky` keeps the header in view while the page scrolls. Inside a `.table-responsive` wrapper with a max height, it sticks to the wrapper instead.

```html
<div class="table-responsive" style="max-height: 10rem">
  <table class="sticky striped">
    <thead>
      <tr><th scope="col">Shade</th><th scope="col">Variable</th></tr>
    </thead>
    <tbody>
      <tr><td>50</td><td>--i-color-blue-50</td></tr>
      <tr><td>100</td><td>--i-color-blue-100</td></tr>
      <tr><td>200</td><td>--i-color-blue-200</td></tr>
      <tr><td>300</td><td>--i-color-blue-300</td></tr>
      <tr><td>400</td><td>--i-color-blue-400</td></tr>
      <tr><td>500</td><td>--i-color-blue-500</td></tr>
      <tr><td>600</td><td>--i-color-blue-600</td></tr>
    </tbody>
  </table>
</div>
```

### Sizes

`.small`, `.medium` and `.large` change the cell padding and font size.

```html
<table class="small">
  <tbody>
    <tr><td>Small</td><td>Compact rows</td></tr>
    <tr><td>Table</td><td>For dense data</td></tr>
  </tbody>
</table>
<table class="large">
  <tbody>
    <tr><td>Large</td><td>Roomy rows</td></tr>
  </tbody>
</table>
```

### Responsive

Wrap a wide table in `.table-responsive` to scroll it sideways instead of the page. Keyboard users can only scroll it once it can take focus, so give it `tabindex="0"` and an `aria-label`.

```html
<div class="table-responsive">
  <table>
    <thead>
      <tr><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th><th scope="col">Sun</th><th scope="col">Total</th></tr>
    </thead>
    <tbody>
      <tr><td>1,204 visits</td><td>1,388 visits</td><td>1,512 visits</td><td>1,470 visits</td><td>1,290 visits</td><td>860 visits</td><td>790 visits</td><td>8,514 visits</td></tr>
    </tbody>
  </table>
</div>
```

---

## Media

Source: https://iriscss.com/documentation/elements/media/

Images, video, audio, iframes and SVG scale down to fit their container.

### Images

Images never grow wider than their container and keep their aspect ratio. The alt text of an image that fails to load shows in italics.

```html
<img src="/android-chrome-512x512.png" alt="Iris CSS logo" width="160" height="160">
<img src="/missing.png" alt="This image failed to load">
```

### Figure

A `figcaption` sits under the media in the subtle text color.

```html
<figure>
  <img src="/android-chrome-512x512.png" alt="Iris CSS logo" width="120" height="120">
  <figcaption>The Iris CSS logo.</figcaption>
</figure>
```

### Iframe

An iframe without `width` or `height` fills the width at 16:9. Embedded videos need no wrapper.

```html
<iframe src="/about/" title="About Iris CSS"></iframe>
```

### Audio and video

`audio` fills the width. `video` scales like an image, and captions from a `track` use the page font.

```html
<audio controls src="podcast.mp3"></audio>

<video controls width="640" height="360" src="intro.mp4">
  <track kind="captions" src="intro.vtt" srclang="en" label="English">
</video>
```

### SVG

An inline SVG without a `fill` takes the text color.

```html
<p class="brand">
  <svg viewBox="0 0 16 16" width="24" height="24" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg>
  A star in the text color
</p>
```

---

## Progress and meter

Source: https://iriscss.com/documentation/elements/progress-and-meter/

`progress` shows how far a task has got. `meter` shows a value in a known range.

### Progress

```html
<progress value="40" max="100">40%</progress>
```

### Indeterminate

Without a `value` the bar animates while the task runs. Users who prefer reduced motion see a still bar.

```html
<progress></progress>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) colors the bar.

```html
<progress class="secondary" value="20" max="100"></progress>
<progress class="info" value="40" max="100"></progress>
<progress class="warning" value="60" max="100"></progress>
<progress class="danger" value="80" max="100"></progress>
```

### Meter

The bar is green in the optimum range, yellow below it and red in the worst range. Set `low`, `high` and `optimum` to define the ranges.

```html
<label>Disk usage, low <meter value="0.3" low="0.6" high="0.8" optimum="0.2">30%</meter></label>
<label>Disk usage, high <meter value="0.7" low="0.6" high="0.8" optimum="0.2">70%</meter></label>
<label>Disk usage, full <meter value="0.95" low="0.6" high="0.8" optimum="0.2">95%</meter></label>
```

### Sizes and styles

Both take `.small`, `.medium` and `.large`, and `.rounded` or `.square`.

```html
<progress class="small rounded" value="50" max="100"></progress>
<progress class="large square" value="50" max="100"></progress>
<meter class="large rounded" value="0.5"></meter>
```

---

## Popover

Source: https://iriscss.com/documentation/elements/popover/

Any element with the `popover` attribute, opened by a button with `popovertarget`. No JavaScript.

The popover fades in over the page, centered by default. Clicking outside or pressing `Esc` closes it.

```html
<button popovertarget="popover-basic">Open popover</button>
<div id="popover-basic" popover>
  <h4>Popover</h4>
  <p>Click outside or press Esc to close.</p>
</div>
```

### Placement

`data-placement` anchors the popover to its button: `bottom`, `top`, `left` or `right`. It flips to the other side when there is no room. Browsers without anchor positioning keep it centered.

```html
<button popovertarget="popover-bottom">Bottom</button>
<div id="popover-bottom" popover data-placement="bottom">Below the button</div>
<button popovertarget="popover-top">Top</button>
<div id="popover-top" popover data-placement="top">Above the button</div>
<button popovertarget="popover-left">Left</button>
<div id="popover-left" popover data-placement="left">Before the button</div>
<button popovertarget="popover-right">Right</button>
<div id="popover-right" popover data-placement="right">After the button</div>
```

### Older browsers

Browsers without the Popover API show the content in place, as normal page content.

### Related

The [navbar](https://iriscss.com/documentation/components/navbar/index.html.md) menu and the [toast](https://iriscss.com/documentation/components/toast/index.html.md) are popovers too. For a short label on hover, use a [tooltip](https://iriscss.com/documentation/components/tooltip/index.html.md).

---

## Controls

Source: https://iriscss.com/documentation/form/controls/

Inputs, selects and textareas are full width, with a label above and room for helper text below.

Write a plain form. Each control fills the width, and a control inside its `label` sits right under the label text. Buttons, submit buttons included, keep the width of their text.

```html
<form>
  <label>Name <input type="text" name="name" placeholder="Ada Lovelace" autocomplete="name"></label>
  <label>Email <input type="email" name="email" placeholder="ada@example.com" autocomplete="email"></label>
  <button type="submit">Send</button>
</form>
```

### Select

A select gets a chevron. Where the browser supports a customizable select, the option list follows the theme too.

```html
<label>
  Plan
  <select name="plan" required>
    <option value="" selected disabled>Choose a plan</option>
    <option>Free</option>
    <option>Pro</option>
    <option>Team</option>
  </select>
</label>
<label>
  Topics
  <select name="topics" multiple size="3">
    <option selected>Forms</option>
    <option>Layout</option>
    <option>Components</option>
  </select>
</label>
```

### Textarea

A textarea grows with its text, from 4 to 16 lines, where the browser supports `field-sizing`. A `rows` attribute keeps a fixed height.

```html
<label>Message <textarea name="message" placeholder="Type a few lines"></textarea></label>
```

### Helper text

A `small` right after a control is its helper text. Link it with `aria-describedby`.

```html
<label for="username">Username</label>
<input type="text" id="username" aria-describedby="username-help">
<small id="username-help">Letters and numbers only.</small>
```

### Fieldset

A `fieldset` groups related controls under a `legend`. `disabled` on the fieldset turns off and fades every control inside.

```html
<fieldset disabled>
  <legend>Shipping</legend>
  <label>Street <input type="text" name="street"></label>
  <button type="submit">Save</button>
</fieldset>
```

### Side by side

Put controls in a [`.grid`](https://iriscss.com/documentation/layout/container-and-grid/index.html.md#grid) to place them in columns that stack on narrow screens.

```html
<div class="grid">
  <label>First name <input type="text" name="first"></label>
  <label>Last name <input type="text" name="last"></label>
</div>
```

### Output

`output` shows a computed value in bold with even digit widths, so it does not shift as it changes.

```html
<form oninput="total.value = Number(price.value) * Number(count.value)">
  <div class="grid">
    <label>Price <input type="number" name="price" value="12"></label>
    <label>Count <input type="number" name="count" value="3"></label>
  </div>
  <p>Total: <output name="total">36</output></p>
</form>
```

### Disabled and read only

```html
<input type="text" value="Disabled" disabled aria-label="Disabled">
<input type="text" value="Read only" readonly aria-label="Read only">
```

### Sizes

```html
<input type="text" class="small" placeholder="Small" aria-label="Small">
<input type="text" placeholder="Default" aria-label="Default">
<input type="text" class="medium" placeholder="Medium" aria-label="Medium">
<select class="large" aria-label="Large"><option>Large</option></select>
```

### Styles

`.rounded` gives pill corners, `.square` removes them and `.outlined` makes the background transparent.

```html
<input type="text" class="rounded" placeholder="Rounded" aria-label="Rounded">
<input type="text" class="square" placeholder="Square" aria-label="Square">
<input type="text" class="outlined" placeholder="Outlined" aria-label="Outlined">
```

---

## Input types

Source: https://iriscss.com/documentation/form/input-types/

Search, date and time, color, file and range inputs, each with a look that fits the rest of the form.

### Search

A search input is a pill with a magnifier at the start.

```html
<input type="search" name="q" placeholder="Search the docs" aria-label="Search the docs">
```

### Date and time

In Chrome and Edge, the picker button of `date`, `datetime-local`, `month` and `week` gets a calendar icon, and `time` a clock. Firefox and Safari keep their own.

```html
<div class="grid">
  <label>Date <input type="date" name="date"></label>
  <label>Time <input type="time" name="time"></label>
  <label>Month <input type="month" name="month"></label>
  <label>Week <input type="week" name="week"></label>
</div>
<label>Date and time <input type="datetime-local" name="when"></label>
```

### Color

```html
<label>Brand color <input type="color" name="brand" value="#e12afb"></label>
```

### File

The picker is a secondary [button](https://iriscss.com/documentation/elements/button/index.html.md) followed by the file name.

```html
<label>Avatar <input type="file" name="avatar" accept="image/*"></label>
```

### Range

The thumb turns primary while you use it, with an accent dot while you drag it. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes the primary color.

```html
<label>Volume <input type="range" name="volume" value="40"></label>
```

---

## Checkbox, radio and switch

Source: https://iriscss.com/documentation/form/checkbox-radio-and-switch/

Checkboxes and radios with custom marks, and `role="switch"` to turn a checkbox into a switch.

Put the input inside its `label`. The label lines up with the box and the whole label is clickable.

```html
<fieldset>
  <legend>Notifications</legend>
  <label><input type="checkbox" name="email" checked> Email</label>
  <label><input type="checkbox" name="sms"> SMS</label>
</fieldset>
<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="monthly" checked> Monthly</label>
  <label><input type="radio" name="plan" value="yearly"> Yearly</label>
</fieldset>
```

### Switch

`role="switch"` on a checkbox draws a switch. Screen readers announce it as on or off.

```html
<label><input type="checkbox" role="switch" checked> Dark mode</label>
<label><input type="checkbox" role="switch"> Autoplay</label>
```

### Colors

Checked boxes, radios and switches use the primary color. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the input changes it.

```html
<label><input type="checkbox" class="danger" checked> Danger</label>
<label><input type="radio" class="info" checked> Info</label>
<label><input type="checkbox" role="switch" class="accent" checked> Accent</label>
```

### Indeterminate

A checkbox for a partly selected list shows a dash. Set `indeterminate` from a script, since there is no attribute for it.

```html
<label><input type="checkbox" id="select-all"> Select all</label>
```

```js
document.getElementById("select-all").indeterminate = true;
```

### Disabled

```html
<label><input type="checkbox" disabled> Checkbox</label>
<label><input type="radio" disabled checked> Radio</label>
<label><input type="checkbox" role="switch" disabled> Switch</label>
```

---

## Validation

Source: https://iriscss.com/documentation/form/validation/

Native validation works with no script. `aria-invalid` shows the result of your own checks.

### Native validation

Controls that break their `required`, `type`, `pattern` or length rules turn red with an icon. Iris uses `:user-invalid`, so a field only turns red after the user has changed it or tried to submit. Type a few letters below, then clear the field.

```html
<form>
  <label>Email <input type="email" name="email" required placeholder="ada@example.com"></label>
  <small>We never share your email.</small>
  <button type="submit">Subscribe</button>
</form>
```

### Server side checks

For checks the browser cannot make, set `aria-invalid` yourself. `"true"` marks an error and `"false"` a field that passed. Screen readers announce the error too.

```html
<label for="valid-name">Username</label>
<input type="text" id="valid-name" value="ada" aria-invalid="false" aria-describedby="valid-name-help">
<small id="valid-name-help">Available.</small>
<label for="invalid-name">Username</label>
<input type="text" id="invalid-name" value="admin" aria-invalid="true" aria-describedby="invalid-name-help">
<small id="invalid-name-help">This name is taken.</small>
```

### Helper text

A `small` right after the control follows its state: green when it is valid and red when it is not. It works after a `fieldset` or a `.grid` too.

### Selects, textareas and checkboxes

```html
<select aria-invalid="true" aria-label="Country"><option>Choose a country</option></select>
<textarea aria-invalid="true" aria-label="Message">Too short</textarea>
<label><input type="checkbox" aria-invalid="true"> I accept the terms</label>
<label><input type="checkbox" role="switch" aria-invalid="false" checked> Newsletter</label>
```

---

## Group

Source: https://iriscss.com/documentation/form/group/

`.group` joins inputs, selects and buttons into one row.

The children share borders and corners. The focused child moves on top, so its focus ring shows over its neighbors. Add `role="group"` and a label when the row is one control, so screen readers announce it as one.

```html
<div class="group" role="group">
  <input type="email" name="email" placeholder="Email" aria-label="Email">
  <button class="primary">Subscribe</button>
</div>
```

### Buttons

```html
<div class="group" role="group" aria-label="Text alignment">
  <button aria-current="true">Left</button>
  <button>Center</button>
  <button>Right</button>
</div>
```

### With a select

```html
<div class="group" role="group">
  <select aria-label="Currency"><option>USD</option><option>EUR</option></select>
  <input type="number" placeholder="Amount" aria-label="Amount">
</div>
```

### Search

A group on or inside `search` or `role="search"` gets pill ends. When `search` holds a form, put the class on the form.

```html
<search>
  <form class="group">
    <input type="search" name="q" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</search>
```

### Sizes

A size class on the group sizes every control inside.

```html
<div class="group small" role="group">
  <input type="text" placeholder="Small" aria-label="Small">
  <button>Go</button>
</div>
<div class="group large" role="group">
  <input type="text" placeholder="Large" aria-label="Large">
  <button>Go</button>
</div>
```

### Rounded and square

```html
<div class="group rounded" role="group">
  <input type="text" placeholder="Rounded" aria-label="Rounded">
  <button class="primary">Go</button>
</div>
```

---

## Accordion

Source: https://iriscss.com/documentation/components/accordion/

Every `details` element is an accordion. It animates open and closed with no JavaScript.

The summary gets a chevron that turns when the panel opens. Opening and closing animate where the browser supports `::details-content` and `interpolate-size`, and snap open elsewhere.

```html
<details>
  <summary>Does Iris CSS need JavaScript?</summary>
  <p>No. Every component works with plain HTML and CSS.</p>
</details>
<details open>
  <summary>Can I use my own styles?</summary>
  <p>Yes. Iris CSS sits in cascade layers, so your CSS always wins.</p>
</details>
```

### One open at a time

Give the `details` elements the same `name` and opening one closes the others.

```html
<details name="faq" open>
  <summary>Shipping</summary>
  <p>Orders ship within two working days.</p>
</details>
<details name="faq">
  <summary>Returns</summary>
  <p>Send it back within 30 days for a full refund.</p>
</details>
<details name="faq">
  <summary>Warranty</summary>
  <p>Two years on every product.</p>
</details>
```

### Summary as a button

`role="button"` on the summary makes it look like a [button](https://iriscss.com/documentation/elements/button/index.html.md), with color classes and all.

```html
<details>
  <summary role="button" class="secondary">Show the details</summary>
  <p>The content opens under the button.</p>
</details>
```

### Related

[Tabs](https://iriscss.com/documentation/components/tabs/index.html.md) are built on `details` too. For a menu that opens over the page, use a [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md).

---

## Alert

Source: https://iriscss.com/documentation/components/alert/

A tinted message box with a colored bar on the start edge.

Add `.alert` to any block element. Give it `role="alert"` for urgent messages or `role="status"` for the rest, so screen readers announce it.

```html
<div class="alert" role="status">Your changes were saved as a draft.</div>
```

### Colors

A color class sets the bar, border, tint and text color.

```html
<div class="alert info" role="status">A new version is available.</div>
<div class="alert success" role="status">Payment received.</div>
<div class="alert warning" role="alert">Your trial ends tomorrow.</div>
<div class="alert danger" role="alert">The upload failed.</div>
```

### Headings and links

Headings and links inside an alert take its color.

```html
<div class="alert primary" role="status">
  <h4>Welcome to Iris CSS</h4>
  <p>Start with plain HTML, then <a href="/documentation/">read the docs</a> when you need a variant.</p>
</div>
```

---

## Avatar

Source: https://iriscss.com/documentation/components/avatar/

A round picture or initials, in four sizes, with overlapping groups.

Put `.avatar` on an `img`, or on a `span` with initials.

```html
<img class="avatar" src="/android-chrome-192x192.png" alt="Iris CSS">
<span class="avatar">AL</span>
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) colors the initials and their background.

```html
<span class="avatar primary">PR</span>
<span class="avatar info">IN</span>
<span class="avatar success">SU</span>
<span class="avatar danger">DA</span>
<span class="avatar contrast">CO</span>
```

### Sizes

```html
<span class="avatar small">S</span>
<span class="avatar">D</span>
<span class="avatar medium">M</span>
<span class="avatar large">L</span>
```

### Square

`.square` rounds the corners only.

```html
<img class="avatar square large" src="/android-chrome-192x192.png" alt="Iris CSS">
<span class="avatar square large">AL</span>
```

### Group

`.avatar-group` overlaps the avatars, with a ring in the page color between them.

```html
<div class="avatar-group">
  <span class="avatar primary">AL</span>
  <span class="avatar info">GH</span>
  <span class="avatar accent">AT</span>
  <span class="avatar">+4</span>
</div>
```

---

## Badge

Source: https://iriscss.com/documentation/components/badge/

A small pill for counts and labels. Its size follows the text around it.

```html
<h3>Inbox <span class="badge">12</span></h3>
<p>Status: <span class="badge success">Paid</span></p>
<button>Messages <span class="badge danger">3</span></button>
```

### Colors

Badges are secondary by default. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes the color.

```html
<p>
  <span class="badge primary">Primary</span>
  <span class="badge secondary">Secondary</span>
  <span class="badge contrast">Contrast</span>
  <span class="badge accent">Accent</span>
  <span class="badge info">Info</span>
  <span class="badge success">Success</span>
  <span class="badge warning">Warning</span>
  <span class="badge danger">Danger</span>
  <span class="badge link">Link</span>
</p>
```

### Outlined

```html
<p>
  <span class="badge primary outlined">Primary</span>
  <span class="badge info outlined">Info</span>
  <span class="badge danger outlined">Danger</span>
</p>
```

### As a link

```html
<p><a href="#" class="badge info">css</a> <a href="#" class="badge info">html</a></p>
```

---

## Box

Source: https://iriscss.com/documentation/components/box/

A padded block with a background, rounded corners and a shadow.

```html
<div class="box">
  <p>A box holds anything: text, a form or a small widget.</p>
</div>
```

### Clickable box

On a link the whole box is clickable and lifts on hover.

```html
<a class="box" href="#">
  <strong>Documentation</strong>
  <p>Everything about Iris CSS in one place.</p>
</a>
```

### Styles

`.outlined` swaps the shadow for a border. `.rounded` and `.square` change the corners.

```html
<div class="box outlined">Outlined</div>
<div class="box rounded">Rounded</div>
<div class="box square">Square</div>
```

### Box or card

A box is one plain block. A [card](https://iriscss.com/documentation/components/card/index.html.md) adds header and footer bands and size classes.

---

## Card

Source: https://iriscss.com/documentation/components/card/

A padded block with a background, a shadow and optional header and footer bands.

Add `.card` to any block element, usually an `article`. A direct `header` or `footer` becomes a tinted band.

```html
<article class="card">
  <header><h3>Pro plan</h3></header>
  <p>Unlimited projects, priority support and early access to new components.</p>
  <footer><button class="primary">Choose</button></footer>
</article>
```

### Body only

```html
<article class="card">
  <p>A card without bands is a padded block, like a <a href="/documentation/components/box/">box</a>.</p>
</article>
```

### Outlined

`.outlined` swaps the background and shadow for a border, and makes the bands transparent.

```html
<article class="card outlined">
  <header><strong>Outlined</strong></header>
  <p>A quiet card for secondary content.</p>
</article>
```

### Sizes

`.small`, `.medium` and `.large` change the padding.

```html
<article class="card small"><p>Small</p></article>
<article class="card"><p>Default</p></article>
<article class="card medium"><p>Medium</p></article>
<article class="card large"><p>Large</p></article>
```

### Rounded and square

```html
<article class="card rounded"><p>Rounded</p></article>
<article class="card square"><p>Square</p></article>
```

### Card grid

Put cards in a [`.grid`](https://iriscss.com/documentation/layout/container-and-grid/index.html.md#grid) for equal columns that wrap.

```html
<div class="grid">
  <article class="card"><h4>Free</h4><p>3 projects</p></article>
  <article class="card"><h4>Pro</h4><p>Unlimited projects</p></article>
  <article class="card"><h4>Team</h4><p>Shared workspaces</p></article>
</div>
```

### In a modal

A [modal](https://iriscss.com/documentation/components/modal/index.html.md) dialog is always a card, with no class.

---

## Carousel

Source: https://iriscss.com/documentation/components/carousel/

A row of slides that scrolls sideways and snaps to each one, with no JavaScript.

Put the slides inside `.carousel`. Swipe, scroll or use the keyboard to move. Where the browser supports scroll buttons and scroll markers, the carousel also gets previous and next buttons and a dot for each slide. Give it `tabindex="0"` and an `aria-label`, so keyboard users can reach and scroll it in every browser.

```html
<div class="carousel" style="--i-carousel-gap: 4rem; padding-inline: 3.5rem; scroll-padding-inline: 3.5rem">
  <article class="card outlined"><h4>Classless</h4><p>Plain HTML is styled with no class.</p></article>
  <article class="card outlined"><h4>Themes</h4><p>Light and dark in every color.</p></article>
  <article class="card outlined"><h4>Layers</h4><p>Your own CSS always wins.</p></article>
  <article class="card outlined"><h4>Variables</h4><p>Change any value with one property.</p></article>
  <article class="card outlined"><h4>Accessible</h4><p>Focus rings, ARIA states and user preferences.</p></article>
</div>
```

The buttons sit over the edges of the carousel. With text slides, give the carousel side padding, the same `scroll-padding-inline`, and a `--i-carousel-gap` a little wider than the padding. The buttons then sit in empty gutters beside the text, and the next slide stays out of sight.

### Images

Any element can be a slide, usually a `figure`. The photos come from [Picsum](https://picsum.photos).

```html
<div class="carousel" style="--i-carousel-item-width: 15rem">
  <figure><img src="/android-chrome-512x512.png" alt="Iris CSS logo" width="480" height="320" style="aspect-ratio: 3 / 2; object-fit: contain"><figcaption>Iris CSS</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1015/480/320" alt="A fjord between rocky cliffs" width="480" height="320" loading="lazy"><figcaption>Fjord</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1016/480/320" alt="Red rock canyon at sunset" width="480" height="320" loading="lazy"><figcaption>Canyon</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1018/480/320" alt="A road winding through green hills" width="480" height="320" loading="lazy"><figcaption>Hills</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1019/480/320" alt="Storm clouds over the sea" width="480" height="320" loading="lazy"><figcaption>Storm</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1025/480/320" alt="A pug wrapped in a blanket" width="480" height="320" loading="lazy"><figcaption>Pug</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1036/480/320" alt="Tents in the snow below mountain peaks" width="480" height="320" loading="lazy"><figcaption>Camp</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1039/480/320" alt="A waterfall in a green forest" width="480" height="320" loading="lazy"><figcaption>Waterfall</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1043/480/320" alt="Granite cliffs above a forest river" width="480" height="320" loading="lazy"><figcaption>Valley</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1044/480/320" alt="A person by a misty mountain river" width="480" height="320" loading="lazy"><figcaption>River</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1047/480/320" alt="A narrow brick alley in a city" width="480" height="320" loading="lazy"><figcaption>Alley</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1050/480/320" alt="Sea cliffs and rock stacks" width="480" height="320" loading="lazy"><figcaption>Cliffs</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1069/480/320" alt="An orange jellyfish in blue water" width="480" height="320" loading="lazy"><figcaption>Jellyfish</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1074/480/320" alt="A lioness looking at the camera" width="480" height="320" loading="lazy"><figcaption>Lioness</figcaption></figure>
</div>
```

### Slide width

Set `--i-carousel-item-width` on the carousel. A value of `100%` shows one slide at a time.

```html
<div class="carousel" style="--i-carousel-item-width: 100%">...</div>
```

---

## Divider

Source: https://iriscss.com/documentation/components/divider/

A rule with text in the middle.

```html
<button class="primary">Sign in with a passkey</button>
<p class="divider">or</p>
<label>Email <input type="email" name="email"></label>
```

For a rule without text, use `<hr>`. See [typography](https://iriscss.com/documentation/elements/typography/index.html.md#address-and-rule).

---

## Drawer

Source: https://iriscss.com/documentation/components/drawer/

A [modal](https://iriscss.com/documentation/components/modal/index.html.md) that slides in from an edge of the screen.

Add `.drawer` to the `dialog`. It slides in from the end edge and opens like any modal.

```html
<button commandfor="drawer-end" command="show-modal">Open drawer</button>
<dialog id="drawer-end" class="drawer" aria-labelledby="drawer-end-title">
  <header>
    <button class="close" commandfor="drawer-end" command="close" aria-label="Close"></button>
    <h3 id="drawer-end-title">Filters</h3>
  </header>
  <label><input type="checkbox" checked> In stock</label>
  <label><input type="checkbox"> On sale</label>
</dialog>
```

### Start

`.start` uses the start edge, for a side menu.

```html
<button commandfor="drawer-start" command="show-modal">Open menu</button>
<dialog id="drawer-start" class="drawer start" aria-label="Menu">
  <button class="close" commandfor="drawer-start" command="close" aria-label="Close"></button>
  <aside>
    <nav aria-label="Drawer menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Settings</a></li>
      </ul>
    </nav>
  </aside>
</dialog>
```

### Bottom sheet

`.bottom` slides up from the bottom with rounded top corners.

```html
<button commandfor="drawer-bottom" command="show-modal">Share</button>
<dialog id="drawer-bottom" class="drawer bottom" aria-label="Share">
  <p>Share this page</p>
  <menu>
    <li><button class="small">Copy link</button></li>
    <li><button class="small" commandfor="drawer-bottom" command="close">Cancel</button></li>
  </menu>
</dialog>
```

---

## Dropdown

Source: https://iriscss.com/documentation/components/dropdown/

A popover list of links or choices, opened by a button. No JavaScript.

```html
<button popovertarget="dropdown-account">Account</button>
<ul id="dropdown-account" popover class="dropdown">
  <li><a href="#">Profile</a></li>
  <li><a href="#" aria-current="page">Settings</a></li>
  <li><a href="#">Sign out</a></li>
</ul>
```

Give the list `popover` and `.dropdown`, and point the button's `popovertarget` at its `id`. Put the list right after the button, which then shows a chevron that turns while the menu is open. Clicking outside or pressing `Esc` closes it, and the browser tells screen readers whether it is open. `aria-current` marks the selected link.

Where the browser supports anchor positioning, the menu opens below the button, at least as wide as it, and flips above it near the bottom of the screen. It sits in the top layer, so no container clips it. Browsers without anchor positioning center it like any [popover](https://iriscss.com/documentation/elements/popover/index.html.md).

### Button

The button keeps every [button](https://iriscss.com/documentation/elements/button/index.html.md) color, style and size.

```html
<button popovertarget="dropdown-actions" class="primary">Actions</button>
<ul id="dropdown-actions" popover class="dropdown">
  <li><a href="#">Duplicate</a></li>
  <li><a href="#">Archive</a></li>
</ul>
<button popovertarget="dropdown-more" class="secondary outlined small">More</button>
<ul id="dropdown-more" popover class="dropdown">
  <li><a href="#">Export</a></li>
  <li><a href="#">Print</a></li>
</ul>
```

### Select

`.select` draws the button as a [select](https://iriscss.com/documentation/form/controls/index.html.md), for a menu of choices. List items can hold labels with checkboxes or radios.

```html
<button popovertarget="dropdown-languages" class="select">Languages</button>
<ul id="dropdown-languages" popover class="dropdown">
  <li><label><input type="checkbox" name="lang" checked> English</label></li>
  <li><label><input type="checkbox" name="lang"> French</label></li>
  <li><label><input type="checkbox" name="lang"> German</label></li>
</ul>
```

### In a form

Inside a `label` the select button sits under the label text like any control. `aria-invalid` on it shows a [validation](https://iriscss.com/documentation/form/validation/index.html.md) state.

```html
<label>
  Size
  <button popovertarget="dropdown-size" class="select" aria-invalid="true">Choose a size</button>
</label>
<ul id="dropdown-size" popover class="dropdown">
  <li><label><input type="radio" name="size"> Small</label></li>
  <li><label><input type="radio" name="size"> Large</label></li>
</ul>
```

### In a nav

Inside `nav` a button without a class looks like a link. See [nav](https://iriscss.com/documentation/components/nav/index.html.md).

```html
<nav aria-label="Dropdown example">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <button popovertarget="dropdown-products">Products</button>
      <ul id="dropdown-products" popover class="dropdown">
        <li><a href="#">Iris CSS</a></li>
        <li><a href="#">Themes</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

### Sizes and styles

A select button takes size classes, `.rounded`, `.square` and `.outlined`.

```html
<button popovertarget="dropdown-small" class="select small rounded">Small and rounded</button>
<ul id="dropdown-small" popover class="dropdown"><li><a href="#">Item</a></li></ul>
<button popovertarget="dropdown-large" class="select large outlined">Large and outlined</button>
<ul id="dropdown-large" popover class="dropdown"><li><a href="#">Item</a></li></ul>
```

---

## Footer

Source: https://iriscss.com/documentation/components/footer/

A page footer with link columns that works on mobile and desktop.

Add `class="footer"` to the page `footer`. Everything inside is plain HTML. The element that holds the `nav` elements becomes the column grid, and its first child is the brand when it is not a `nav`. The element right after the grid is the bottom row, for the copyright and credits.

```html
<footer class="footer">
  <div class="container-fluid">
    <div>
      <div>
        <a href="#"><img src="/favicon.svg" alt=""> Brand</a>
        <p>A short line about your project.</p>
      </div>
      <nav aria-label="Product">
        <h2>Product</h2>
        <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Changelog</a></li>
        </ul>
      </nav>
      <nav aria-label="Company">
        <h2>Company</h2>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <p>&copy; 2026 Brand. All rights reserved.</p>
      <p><a href="#">Privacy</a> and <a href="#">terms</a></p>
    </div>
  </div>
</footer>
```

### Mobile and desktop

The footer measures its own width, not the screen. Columns sit side by side while they fit and wrap to new rows when they don't. Below 48rem the brand gets a row of its own, links get more room to tap and the bottom row stacks. The example above is narrower than 48rem, so it shows the phone layout. Resize the window to see both layouts in this site's own footer.

On phones with a home indicator, the bottom padding grows to keep the content clear of it.

### Simple footer

Without a `nav`, the footer is a plain band for a line or two of text.

```html
<footer class="footer">
  <div class="container-fluid">
    <p>&copy; 2026 Brand. Made with plain HTML.</p>
  </div>
</footer>
```

### Sticky

`.sticky` keeps the footer at the bottom of the window when the page is shorter than the screen. On longer pages it sits after the content as usual. The footer must be a direct child of `body`, which becomes a flex column. In a flex column the margins of the other children no longer collapse, so check the spacing of your page sections.

```html
<footer class="footer sticky">...</footer>
```

### Colors

A color class fills the band. Text, headings and links switch to the band's text color.

```html
<footer class="footer contrast">
  <div class="container-fluid">
    <div>
      <div>
        <a href="#">Brand</a>
      </div>
      <nav aria-label="Contrast example">
        <h2>Links</h2>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <p>&copy; 2026 Brand</p>
    </div>
  </div>
</footer>
<footer class="footer primary">
  <div class="container-fluid">
    <p>&copy; 2026 Brand</p>
  </div>
</footer>
```

---

## Icon

Source: https://iriscss.com/documentation/components/icon/

A square box for an inline SVG or an icon font. It keeps its space while the icon loads.

Iris CSS ships no icon set. Wrap any SVG or icon font glyph in `.icon`. An SVG without `fill` takes the text color.

```html
<p>
  <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon color-amber-500"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
</p>
```

### Sizes

```html
<p>
  <span class="icon small"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon medium"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon large"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
</p>
```

### Icon and text

`.icon-text` puts an icon and its label side by side. On a `div` it spans the full width.

```html
<p>
  <span class="icon-text">
    <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
    <span>Starred</span>
  </span>
</p>
<button class="accent">
  <span class="icon-text">
    <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
    <span>Add to favorites</span>
  </span>
</button>
```

---

## Loader

Source: https://iriscss.com/documentation/components/loader/

`aria-busy="true"` shows a spinner before the content, in the text color.

The attribute also tells screen readers that the content is loading. Remove it when the work is done. Form controls cannot show a spinner, so put it on their button or label instead.

```html
<p aria-busy="true">Loading your projects</p>
```

### Buttons and links

A busy button or link keeps its spinner and label on one line. `aria-busy` does not stop the mouse or the keyboard, so also set `aria-disabled="true"`. The button looks disabled but keeps focus, and your script ignores it until the work is done. Announce the result in a `role="status"` region.

```html
<button aria-busy="true" aria-disabled="true">Saving</button>
<button class="primary" aria-busy="true" aria-disabled="true">Uploading</button>
<a href="#" role="button" class="secondary" aria-busy="true" aria-disabled="true">Loading</a>
```

### Spinner only

An empty busy element shows the spinner alone. Give it `role="status"` and a label, so screen readers announce it.

```html
<div aria-busy="true" role="status" aria-label="Loading"></div>
```

### Reduced motion

The spinner keeps turning when the user prefers reduced motion, since it carries meaning. See [user preferences](https://iriscss.com/documentation/accessibility/user-preferences/index.html.md).

---

## Modal

Source: https://iriscss.com/documentation/components/modal/

A `dialog` drawn as a card over a dimmed page. It animates in and out, and the page stops scrolling while it is open.

The dialog is a [card](https://iriscss.com/documentation/components/card/index.html.md), and a direct `header` or `footer` becomes a band. Open it with a button that has `command="show-modal"`, and close it with `command="close"`. `Esc` closes it too, and `closedby="any"` adds a click outside, where the browser supports it. No script is needed.

```html
<button class="primary" commandfor="modal-example" command="show-modal">Open modal</button>
<dialog id="modal-example" closedby="any" aria-labelledby="modal-example-title">
  <header>
    <button class="close" commandfor="modal-example" command="close" aria-label="Close"></button>
    <h3 id="modal-example-title">Delete project?</h3>
  </header>
  <p>The project and its files are deleted for good.</p>
  <footer>
    <button class="secondary" commandfor="modal-example" command="close">Cancel</button>
    <button class="danger" commandfor="modal-example" command="close">Delete</button>
  </footer>
</dialog>
```

`.close` on a button in the header draws an X at the end. A link with `rel="prev"` gets the same look, for a modal that has its own URL.

### Return a value

Buttons in a `<form method="dialog">` close the dialog and set its `returnValue` to the button value.

```html
<button commandfor="modal-form" command="show-modal">Choose a plan</button>
<dialog id="modal-form" aria-label="Choose a plan">
  <form method="dialog">
    <p>Which plan do you want?</p>
    <footer>
      <button value="monthly" class="secondary">Monthly</button>
      <button value="yearly" class="primary">Yearly</button>
    </footer>
  </form>
</dialog>
```

### From a script

Browsers without invoker commands ignore `command`. To support them, call the dialog methods from a script.

```js
const dialog = document.getElementById("modal-example");
dialog.showModal();
dialog.close();
```

### Related

A [drawer](https://iriscss.com/documentation/components/drawer/index.html.md) is a modal that slides in from an edge.

---

## Nav and breadcrumb

Source: https://iriscss.com/documentation/components/nav/

Lists inside `nav` line up in a row. Inside `aside` they stack. `nav.breadcrumb` adds dividers.

Each list in a `nav` is a group. The first sits at the start and the last at the end. Links get a padded hit area, and `aria-current` marks the current page. Only the nav's own lists form the row, so a list nested in an item keeps its layout, and one class on the nav overrides it.

```html
<nav aria-label="Example">
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#" role="button" class="primary">Sign up</a></li>
  </ul>
</nav>
```

### Collapsing menu

Make the link list a popover and add a `.nav-toggle` button for it. The list sits in the nav while there is room, and opens from the button below a 48rem wide nav. For a top bar with a full width panel on phones, use the [navbar](https://iriscss.com/documentation/components/navbar/index.html.md).

```html
<nav aria-label="Collapsing example">
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <button class="nav-toggle" popovertarget="nav-menu" aria-label="Menu"></button>
  <ul id="nav-menu" popover data-placement="bottom">
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
```

### Vertical menu

Inside `aside` the lists stack, for a sidebar menu.

```html
<aside>
  <nav aria-label="Sidebar example">
    <ul>
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</aside>
```

### Breadcrumb

`nav.breadcrumb` puts a divider between items. Mark the last link with `aria-current="page"`. The divider flips in right to left text.

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#" aria-current="page">Nav</a></li>
  </ol>
</nav>
```

### Dropdown

Inside a nav, a button without a class that opens a [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md#nav) looks like a link.

---

## Navbar

Source: https://iriscss.com/documentation/components/navbar/

A responsive top bar that works on mobile and desktop with no JavaScript.

Wrap a `nav` in `<header class="navbar">`. The first list holds the brand. The list with `popover` holds the links, and the `.nav-toggle` button opens it on small screens.

```html
<header class="navbar">
  <nav class="container-fluid" aria-label="Example">
    <ul>
      <li><a href="#"><img src="/favicon.svg" alt=""> Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-basic" aria-label="Menu"></button>
    <ul id="menu-basic" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><button class="primary">Sign in</button></li>
    </ul>
  </nav>
</header>
```

### Mobile and desktop

The navbar measures its own `nav`, not the screen. When the nav is narrower than 48rem, the links hide behind the menu button and open as a full width panel under the bar. That is why the example above shows the menu button here: the preview is narrower than 48rem. Resize the window to see both layouts on this site's own navbar.

Tapping outside the panel or pressing `Esc` closes it. A link to another page closes it by loading that page. A link to a section of the same page leaves it open, so close it in its click handler with `menu.hidePopover()`.

### Sticky

`.sticky` keeps the bar at the top of the screen while the page scrolls, the way this site's navbar works. On phones with a notch the bar also fills the area under the status bar.

```html
<header class="navbar sticky">...</header>
```

### Colors

A color class fills the bar. Links switch to the bar's text color.

```html
<header class="navbar primary">
  <nav class="container-fluid" aria-label="Primary example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-primary" aria-label="Menu"></button>
    <ul id="menu-primary" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<header class="navbar contrast">
  <nav class="container-fluid" aria-label="Contrast example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-contrast" aria-label="Menu"></button>
    <ul id="menu-contrast" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
```

### Current page and icon buttons

`aria-current="page"` marks the link of the page you are on. A button with `aria-label` and no class, such as a theme toggle, is drawn as a plain icon.

```html
<header class="navbar">
  <nav class="container-fluid" aria-label="Icon example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <ul>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li>
        <button type="button" aria-label="Toggle dark mode">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>
        </button>
      </li>
    </ul>
  </nav>
</header>
```

---

## Pagination

Source: https://iriscss.com/documentation/components/pagination/

Page links in a `nav.pagination` list.

Mark the current page with `aria-current="page"` and unavailable links with `aria-disabled="true"`. A `span` fills a gap.

```html
<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="#" aria-disabled="true">Previous</a></li>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="#">12</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the nav colors the current page.

```html
<nav class="pagination contrast" aria-label="Contrast pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>
<nav class="pagination danger" aria-label="Danger pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#" aria-current="page">3</a></li>
  </ul>
</nav>
```

---

## Skeleton

Source: https://iriscss.com/documentation/components/skeleton/

A shimmering placeholder while content loads.

A skeleton is one line tall by default. Set a width or height for other shapes, and `.rounded` for a pill or a circle. Hide it from screen readers with `aria-hidden="true"` and give the region a label that says it is loading.

```html
<article class="card" aria-label="Loading profile">
  <div class="skeleton rounded" style="width: 3rem; height: 3rem" aria-hidden="true"></div>
  <div class="skeleton" style="width: 60%" aria-hidden="true"></div>
  <div class="skeleton" aria-hidden="true"></div>
  <div class="skeleton" style="height: 8rem" aria-hidden="true"></div>
</article>
```

The shimmer stops when the user prefers reduced motion.

---

## Steps

Source: https://iriscss.com/documentation/components/steps/

A numbered tracker for flows like checkout or sign up.

Mark the current step with `aria-current="step"`. Steps before it show as done, steps after it as still to come. Below a 36rem wide screen the steps stack, with each label next to its marker.

```html
<ol class="steps">
  <li>Cart</li>
  <li>Shipping</li>
  <li aria-current="step">Payment</li>
  <li>Review</li>
</ol>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the list colors the done and current steps.

```html
<ol class="steps success">
  <li>Account</li>
  <li aria-current="step">Profile</li>
  <li>Done</li>
</ol>
```

---

## Tabs

Source: https://iriscss.com/documentation/components/tabs/

`details` elements that share a `name`, laid out as tabs. No JavaScript.

Wrap the `details` in `.tabs` and give them the same `name`, so only one opens at a time. The summaries become the tab row. Browsers without `::details-content` show an [accordion](https://iriscss.com/documentation/components/accordion/index.html.md) instead. The open tab ignores clicks, but `Enter` or `Space` on it still closes it, since only a script can stop that.

```html
<div class="tabs">
  <details name="plan" open>
    <summary>Monthly</summary>
    <p>$12 a month, cancel any time.</p>
  </details>
  <details name="plan">
    <summary>Yearly</summary>
    <p>$120 a year, two months free.</p>
  </details>
  <details name="plan">
    <summary>Lifetime</summary>
    <p>Pay once, use it forever.</p>
  </details>
</div>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on `.tabs` colors the line under the open tab.

```html
<div class="tabs accent">
  <details name="code" open>
    <summary>HTML</summary>
    <p>Write the markup.</p>
  </details>
  <details name="code">
    <summary>CSS</summary>
    <p>Override a variable.</p>
  </details>
</div>
```

---

## Toast

Source: https://iriscss.com/documentation/components/toast/

A short message in the bottom end corner of the screen.

### Single toast

Make the toast a manual popover, so it stays until it is closed. A button with `popovertarget` opens it, and a `.close` button inside dismisses it. From a script, call `showPopover()` and `hidePopover()`.

```html
<button popovertarget="toast-saved" popovertargetaction="show">Save</button>
<div id="toast-saved" class="toast success" popover="manual" role="status">
  <p>Your changes were saved.</p>
  <button class="close" popovertarget="toast-saved" popovertargetaction="hide" aria-label="Close"></button>
</div>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) sets the color. Without one the toast uses the contrast color.

```html
<button popovertarget="toast-default" popovertargetaction="show">Default</button>
<div id="toast-default" class="toast" popover="manual" role="status">
  <p>Link copied.</p>
  <button class="close" popovertarget="toast-default" popovertargetaction="hide" aria-label="Close"></button>
</div>
<button class="danger" popovertarget="toast-error" popovertargetaction="show">Danger</button>
<div id="toast-error" class="toast danger" popover="manual" role="alert">
  <p>The upload failed.</p>
  <button class="close" popovertarget="toast-error" popovertargetaction="hide" aria-label="Close"></button>
</div>
```

### Stacked toasts

To show several at once, add and remove `.toast` elements inside a `.toasts` live region. Screen readers announce each new toast.

```html
<div class="toasts" aria-live="polite"></div>

<script>
  function toast(message, color = "") {
    const item = document.createElement("div");
    item.className = `toast ${color}`;
    item.textContent = message;
    document.querySelector(".toasts").append(item);
    setTimeout(() => item.remove(), 4000);
  }
  toast("Saved", "success");
</script>
```

---

## Tooltip

Source: https://iriscss.com/documentation/components/tooltip/

`data-tooltip` shows a short label on hover and focus. No JavaScript.

Tooltips work on buttons, links and any other element. Plain text with a tooltip gets a dotted underline, so readers know there is more.

```html
<button data-tooltip="Saves a draft">Save</button>
<a href="#" data-tooltip="Opens the docs">Docs</a>
<p>Iris CSS uses <span data-tooltip="CSS custom properties">variables</span> for every value.</p>
```

### Placement

The tooltip sits above by default. `data-placement` moves it to the `right`, `bottom` or `left`.

```html
<button data-tooltip="Top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
```

### Accessibility

The tooltip text is drawn with CSS, and screen readers read it as part of the element's name, so `<button data-tooltip="Save file">Save</button>` is announced as "Save file Save". Keep it short and extra, and put anything the user needs in the label itself, for example with `aria-label` on an icon button. The pointer can move onto the tooltip without closing it, but `Esc` cannot close it, since that needs a script. Form fields cannot draw a tooltip, so put it on their label.

`data-tooltip` is skipped on elements that draw their own icon or spinner: busy buttons, `.close`, `.nav-toggle`, `summary` and nav and step items. Use a hint popover there.

### Hint popover

A `popover="hint"` element opened by `interestfor` is the richer tooltip. The browser shows it on hover and focus, closes it with `Esc` and describes the button with it for screen readers. It is anchored to the button, flips away from the edge of the screen and is never clipped. `data-placement` works the same. Browsers without `interestfor` do not show it yet, so keep the label enough on its own.

```html
<button interestfor="save-hint" aria-busy="true">Saving</button>
<div id="save-hint" popover="hint">Your changes are saved every minute</div>
```

---

## Container and grid

Source: https://iriscss.com/documentation/layout/container-and-grid/

Centered content and equal columns that wrap without media queries.

### Container

`.container` centers its content with a max width that grows at each breakpoint. `.container-fluid` always spans the full width with side padding.

| Viewport | Max width |
| --- | --- |
| Below 640px | 100% |
| 640px | 576px |
| 768px | 700px |
| 1024px | 950px |
| 1280px | 1200px |
| 1536px | 1450px |

```html
<main class="container">...</main>
<section class="container-fluid">...</section>
```

### Grid

Children of `.grid` sit side by side in equal columns at least `--i-grid-column-min-width` (10rem) wide, and wrap onto new rows when the grid gets narrow. It adapts to its container as well as the screen.

```html
<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>
```

### Full row

`.span-full` makes a child take a whole row.

```html
<div class="grid">
  <div class="span-full">Full row</div>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
```

### Column width

Set `--i-grid-column-min-width` on the grid to change when columns wrap.

```html
<div class="grid" style="--i-grid-column-min-width: 6rem">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

---

## Primitives

Source: https://iriscss.com/documentation/layout/primitives/

Four classes that cover most layouts without a single media query.

Each primitive replaces the margins of its children with a gap, and adapts to the space it has rather than the screen size. That makes them work the same in a sidebar, a card or the full page.

### Stack

`.stack` spaces its children vertically.

```html
<div class="stack">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
```

### Cluster

`.cluster` puts its children in a row that wraps, for tags, buttons and toolbars.

```html
<div class="cluster">
  <div>HTML</div>
  <div>CSS</div>
  <div>Custom properties</div>
  <div>Cascade layers</div>
  <div>Container queries</div>
</div>
```

### With sidebar

`.with-sidebar` puts a fixed width first child next to fluid content. When the content would get narrower than half the row, the two stack. This docs page uses it for the menu.

```html
<div class="with-sidebar" style="--i-sidebar-width: 10rem">
  <div>Sidebar</div>
  <div>Content</div>
</div>
```

`.end` puts the sidebar last.

```html
<div class="with-sidebar end" style="--i-sidebar-width: 10rem">
  <div>Content</div>
  <div>Sidebar</div>
</div>
```

### Switcher

`.switcher` shows its children in one row while it is wider than `--i-switcher-threshold` (40rem), and in one column below it. There is never a two plus one wrap. More than four children always stack.

```html
<div class="switcher">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
```

### Nesting

Primitives nest freely. A common page: a stack of sections, with a cluster of buttons inside.

```html
<div class="stack">
  <h3>Ready to start?</h3>
  <p>Link one stylesheet and write HTML.</p>
  <div class="cluster">
    <button class="primary">Get started</button>
    <button class="outlined">Read the docs</button>
  </div>
</div>
```

---

## Hero

Source: https://iriscss.com/documentation/layout/hero/

A large intro band at the top of a page, with the content centered.

Add `.hero` to a `section` with a heading, a paragraph and buttons. The heading grows with the screen and the paragraph keeps a readable width.

```html
<section class="hero">
  <h1>Build with plain HTML</h1>
  <p>A CSS framework that styles your markup with no classes and no JavaScript.</p>
  <div class="cluster justify-center">
    <button class="primary">Get started</button>
    <button class="outlined">Documentation</button>
  </div>
</section>
```

### Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) fills the hero, like any element.

```html
<section class="hero primary">
  <h2>Spring sale</h2>
  <p>Every plan is 30% off this week.</p>
  <div><button class="contrast">See plans</button></div>
</section>
```

### Gradient

Combine it with a [gradient](https://iriscss.com/documentation/helpers/gradients/index.html.md) for a richer background.

```html
<section class="hero gradient indigo" data-theme="dark">
  <h2>Iris CSS</h2>
  <p>Modern CSS, no build step.</p>
</section>
```

---

## Colors

Source: https://iriscss.com/documentation/modifiers/colors/

Nine color classes that work on buttons, links, components and plain elements alike.

`.primary`, `.secondary`, `.contrast` and `.accent` set importance. `.info`, `.success`, `.warning`, `.danger` and `.link` set meaning. Each class maps to a theme color and its `-inverse` text color, and switches with the theme.

- `.primary`: `--i-color-primary`
- `.secondary`: `--i-color-secondary`
- `.contrast`: `--i-color-contrast`
- `.accent`: `--i-color-accent`
- `.info`: `--i-color-info`
- `.success`: `--i-color-success`
- `.warning`: `--i-color-warning`
- `.danger`: `--i-color-danger`
- `.link`: `--i-color-link`

### How it works

A color class only sets two variables, `--i-variant` and `--i-variant-inverse`. Each element reads them its own way: a button fills with the color, a link takes it as text, an alert tints its background and a progress bar paints its value.

```html
<div class="cluster">
  <button class="success">Button</button>
  <a href="#" class="success">Link</a>
  <span class="badge success">Badge</span>
</div>
<div class="alert success" role="status">Alert</div>
<progress class="success" value="60" max="100"></progress>
```

### Any element

An element with a color class and no styling of its own gets the color as its background and the inverse color as its text. Headings inside take the text color too.

```html
<section class="contrast" style="padding: 1.5rem">
  <h3>Contrast section</h3>
  <p>Plain markup, painted by the color class.</p>
</section>
```

### Custom colors

For a color outside the list, set the two variables on the element itself. Buttons, links and badges set their own default color, so a value on a parent does not reach them. A button only turns solid with a color class, so keep one and override its variables.

```html
<button class="primary" style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Solid</button>
<button style="--i-variant: #7c3aed">Tint</button>
<button class="outlined" style="--i-variant: #7c3aed">Outlined</button>
<a href="#" style="--i-variant: #7c3aed">Link</a>
```

To change what a class means everywhere, override the theme color, for example `--i-color-primary`. See [themes](https://iriscss.com/documentation/customize/themes/index.html.md#custom-colors).

### Brand

`.brand`, `.brand-name` and `.brand-accent` color a logo or a name with the brand colors. They work on headings, `span`, `div` and `a`.

```html
<h3><span class="brand-name">Iris</span><span class="brand-accent">css</span></h3>
<p><span class="brand">Brand color</span></p>
```

---

## Styles

Source: https://iriscss.com/documentation/modifiers/styles/

`.rounded`, `.square`, `.outlined`, `.tint` and `.deep` change the shape and finish of an element. `.light` and `.dark` set its theme.

### Rounded

`.rounded` gives pill corners to buttons, inputs, selects, textareas, groups, progress bars and meters. Cards, boxes and code get larger corners instead of a pill.

```html
<div class="cluster">
  <button class="primary rounded">Rounded</button>
  <input type="text" class="rounded" placeholder="Rounded input" aria-label="Rounded input">
</div>
<progress class="rounded" value="40" max="100"></progress>
<div class="box rounded">Rounded box</div>
```

### Square

`.square` removes the corners on the same elements.

```html
<div class="cluster">
  <button class="primary square">Square</button>
  <input type="text" class="square" placeholder="Square input" aria-label="Square input">
</div>
<div class="box square">Square box</div>
```

### Outlined

`.outlined` swaps a fill or a shadow for a border. It works on buttons, badges, cards and boxes. On inputs, selects, textareas and select buttons it makes the background transparent.

```html
<div class="cluster">
  <button class="danger outlined">Outlined</button>
  <span class="badge danger outlined">Badge</span>
  <input type="text" class="outlined" placeholder="Outlined input" aria-label="Outlined input">
</div>
<article class="card outlined"><p>Outlined card</p></article>
```

### Tint and deep

On buttons, `.tint` is a pale tint and `.deep` a deep shade, the same in both themes.

```html
<button class="info tint">Tint</button>
<button class="info deep">Deep</button>
```

### Light and dark

`.light` and `.dark` force the light or dark theme on an element and everything inside it, like `data-theme`, see [themes](https://iriscss.com/documentation/customize/themes/index.html.md#nested). On code, `.light` also switches to light code colors.

```html
<article class="card light"><p>Light card</p></article>
<article class="card dark"><p>Dark card</p></article>
```

---

## Sizes

Source: https://iriscss.com/documentation/modifiers/sizes/

`.small`, `.medium` and `.large`. The default size needs no class.

The size classes work on these elements. Everything else keeps its size.

| Element | What changes |
| --- | --- |
| [Buttons](https://iriscss.com/documentation/elements/button/index.html.md#sizes) | Padding and font size |
| [Inputs, selects and textareas](https://iriscss.com/documentation/form/controls/index.html.md#sizes) | Padding, font size, room for icons |
| [Groups](https://iriscss.com/documentation/form/group/index.html.md#sizes) | Every control inside |
| [Select buttons](https://iriscss.com/documentation/components/dropdown/index.html.md#select) | Padding and font size, like a select |
| [Tables](https://iriscss.com/documentation/elements/table/index.html.md#sizes) | Cell padding and font size |
| [Cards](https://iriscss.com/documentation/components/card/index.html.md#sizes) | Padding |
| [Progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md) | Bar height |
| [Avatars](https://iriscss.com/documentation/components/avatar/index.html.md#sizes) | Diameter |
| [Icons](https://iriscss.com/documentation/components/icon/index.html.md#sizes) | Box size |

[Badges](https://iriscss.com/documentation/components/badge/index.html.md) have no size classes. They follow the font size around them, so a badge in a heading is larger than one in a paragraph.

Safari on iPhone zooms in on a field with text smaller than 16px, so `.small` inputs zoom when they get focus. Keep the default size for fields people type in on phones.

### Buttons and controls

```html
<div class="cluster">
  <button class="primary small">Small</button>
  <button class="primary">Default</button>
  <button class="primary medium">Medium</button>
  <button class="primary large">Large</button>
</div>
<input type="text" class="small" placeholder="Small" aria-label="Small">
<input type="text" placeholder="Default" aria-label="Default">
<input type="text" class="large" placeholder="Large" aria-label="Large">
```

### Cards and bars

```html
<article class="card small"><p>Small card</p></article>
<article class="card large"><p>Large card</p></article>
<progress class="small" value="30" max="100"></progress>
<progress class="large" value="70" max="100"></progress>
```

---

## States

Source: https://iriscss.com/documentation/modifiers/states/

`.hover`, `.active`, `.focus` and `.disabled` show a state without touching the element.

Use them for demos, style guides and design reviews. They work on buttons, links, inputs, selects, textareas and select buttons, and look the same as the real state.

### Buttons

```html
<button class="primary">Normal</button>
<button class="primary hover">Hover</button>
<button class="primary active">Active</button>
<button class="primary focus">Focus</button>
<button class="primary disabled" aria-disabled="true">Disabled</button>
```

### Links

```html
<p>
  <a href="#">Normal</a> &middot; <a href="#" class="hover">Hover</a> &middot;
  <a href="#" class="focus">Focus</a> &middot; <a class="disabled" aria-disabled="true">Disabled</a>
</p>
```

### Form controls

```html
<input type="text" placeholder="Normal" aria-label="Normal">
<input type="text" class="hover" placeholder="Hover" aria-label="Hover">
<input type="text" class="focus" placeholder="Focus" aria-label="Focus">
<input type="text" class="disabled" aria-disabled="true" placeholder="Disabled" aria-label="Disabled">
```

### Real states

`.disabled` only changes the look and blocks the pointer. For a control that is really off, use the `disabled` attribute, or `aria-disabled="true"` on a link. The current page or item takes `aria-current`, which shows the hover look. See [ARIA attributes](https://iriscss.com/documentation/accessibility/aria-attributes/index.html.md).

```html
<button disabled>Disabled</button>
<button aria-current="true">Current</button>
```

---

## Display and alignment

Source: https://iriscss.com/documentation/helpers/display-and-alignment/

Small utilities for when the markup alone does not give the layout you need.

Utilities sit in a late cascade layer, so they win over element and component styles.

### Display

| Class | Sets |
| --- | --- |
| `.hidden` | `display: none` |
| `.block` | `display: block` |
| `.inline-block` | `display: inline-block` |
| `.inline` | `display: inline` |
| `.flex` | `display: flex` |
| `.inline-flex` | `display: inline-flex` |
| `.contents` | `display: contents` |
| `.invisible` | `visibility: hidden`, keeps its space |
| `.visible` | `visibility: visible` |

The `hidden` attribute uses `!important`, so it wins over every display class. Prefer it for content a script shows and hides.

```html
<p>Visible paragraph.</p>
<p class="flex" hidden>Hidden, even with a display class.</p>
<p><span class="invisible">Invisible</span> text keeps its space.</p>
```

### Alignment

| Class | Sets |
| --- | --- |
| `.text-center` | `text-align: center` |
| `.justify-center` | `justify-content: center` |
| `.items-center` | `align-items: center` |
| `.mx-auto` | `margin-inline: auto` |

```html
<p class="text-center">Centered text</p>
<div class="flex justify-center items-center" style="gap: 1rem">
  <div>Centered</div>
  <div>flex items</div>
</div>
```

---

## Overflow

Source: https://iriscss.com/documentation/helpers/overflow/

Scroll, clip, truncate or clamp content that does not fit.

### Scroll and clip

| Class | Effect |
| --- | --- |
| `.overflow-auto` | Scrolls in both directions when needed |
| `.overflow-x-auto` | Scrolls sideways when needed |
| `.overflow-y-auto` | Scrolls up and down when needed |
| `.overflow-hidden` | Clips and blocks scrolling |
| `.overflow-clip` | Clips without creating a scroll container, so sticky children still stick to the page |

A box that scrolls must take focus for keyboard users to scroll it, so give it `tabindex="0"` and an `aria-label`.

```html
<div class="overflow-y-auto box" style="max-height: 6rem">
  <p>This box scrolls once its content is taller than 6rem.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
</div>
```

### Truncate

`.truncate` keeps the text on one line and cuts it with an ellipsis.

```html
<p class="truncate" style="max-width: 16rem">A long file name that does not fit, report-final-v2-reviewed.pdf</p>
```

### Line clamp

`.line-clamp` keeps the first 3 lines, with an ellipsis. Set `--i-line-clamp-lines` for another count.

```html
<p class="line-clamp" style="--i-line-clamp-lines: 2; max-width: 22rem">
  Iris CSS styles plain HTML with no classes. Every value is a custom
  property, every rule sits in a cascade layer and every color has a light
  and a dark side, so a page looks right from the first line of markup.
</p>
```

---

## Gradients

Source: https://iriscss.com/documentation/helpers/gradients/

`.gradient` paints a background gradient from any palette family.

Add a palette family class, such as `.blue` or `.amber`, to pick the colors. The gradient runs from the 200 shade through 500 to 800. Without a family it uses gray.

```html
<div class="gradient" style="height: 3rem"></div>
<div class="gradient blue" style="height: 3rem"></div>
<div class="gradient fuchsia" style="height: 3rem"></div>
<div class="gradient emerald" style="height: 3rem"></div>
```

### Direction

A linear gradient runs to the right. `.to-top`, `.to-bottom` and `.to-left` change that.

```html
<div class="gradient amber to-top" style="height: 5rem"></div>
<div class="gradient amber to-bottom" style="height: 5rem"></div>
<div class="gradient amber to-left" style="height: 5rem"></div>
```

### Radial

`.radial` makes a circle from the center. `.ellipse` changes the shape, and `.radial-top`, `.radial-right`, `.radial-bottom` and `.radial-left` move the center.

```html
<div class="gradient radial violet" style="height: 6rem"></div>
<div class="gradient radial ellipse violet" style="height: 6rem"></div>
<div class="gradient radial radial-top violet" style="height: 6rem"></div>
```

### Custom colors

Set `--i-gradient-stops` for any colors you like.

```html
<div class="gradient" style="--i-gradient-stops: var(--i-color-sky-400), var(--i-color-violet-500), var(--i-color-pink-500); height: 3rem"></div>
```

The family classes share their names with the palette, but on their own they do nothing. They only pick colors on an element with `.gradient`.

---

## Print

Source: https://iriscss.com/documentation/helpers/print/

Pages print as black text on white paper, with no extra work.

When the page prints, Iris CSS:

- Switches to the light scheme, black text on a white background, and drops every shadow.
- Hides `nav`, `aside`, dialogs, popovers, toasts, the menu button and the skip link.
- Prints the address after each external link, so a paper copy keeps it.
- Keeps code blocks, quotes, tables, figures, images, cards and boxes on one page where they fit.
- Keeps a heading on the same page as the text after it, and repeats table headers on each page.
- Avoids single lines of a paragraph at the top or bottom of a page.

### Hide something else

Add your own rule for content that only makes sense on screen.

```css
@media print {
  .no-print {
    display: none;
  }
}
```

Try it: print this page or open the print preview of your browser.

---

## ARIA attributes

Source: https://iriscss.com/documentation/accessibility/aria-attributes/

Iris CSS styles the attributes you already write for screen readers, so the look and the meaning stay in sync.

### States

| Attribute | Effect |
| --- | --- |
| `aria-busy="true"` | Shows a spinner. It blocks nothing, so pair it with `aria-disabled="true"` on a button. See [loader](https://iriscss.com/documentation/components/loader/index.html.md). |
| `aria-invalid="true"` | Red border, error icon and red helper text on inputs, selects, textareas, checkboxes and select buttons. See [validation](https://iriscss.com/documentation/form/validation/index.html.md). |
| `aria-invalid="false"` | Green border, check icon and green helper text. |
| `aria-current` | The hover look on links and buttons, the current page in a [pagination](https://iriscss.com/documentation/components/pagination/index.html.md), [breadcrumb](https://iriscss.com/documentation/components/nav/index.html.md#breadcrumb) or [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md), and the current step with `aria-current="step"` in [steps](https://iriscss.com/documentation/components/steps/index.html.md). `aria-current="false"` turns it off. |
| `aria-disabled="true"` | A not allowed cursor. Fades buttons, pagination links and labels. The element stays focusable, so your script must also ignore its clicks. Use it on links, which have no `disabled` attribute. |
| `disabled` | Fades buttons and form controls and shows a not allowed cursor. On a `fieldset` it covers every control inside. |
| `aria-controls` | A pointer cursor, since the element controls another one. Text fields, such as a combobox, keep the text cursor. |

### Roles

| Role | Effect |
| --- | --- |
| `role="button"` | Styles a link or summary as a [button](https://iriscss.com/documentation/elements/button/index.html.md). |
| `role="link"` | Styles any element as a [link](https://iriscss.com/documentation/elements/link/index.html.md). |
| `role="switch"` | Turns a checkbox into a [switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md#switch). |
| `role="search"` | A [.group](https://iriscss.com/documentation/form/group/index.html.md) on or inside it gets pill ends, the same as in `<search>`. |

### Example

```html
<div class="cluster">
  <button class="primary" aria-busy="true">Saving</button>
  <button aria-current="true">Selected</button>
  <a href="#" aria-disabled="true">Unavailable link</a>
</div>
<input type="email" value="not an email" aria-invalid="true" aria-label="Email">
```

### Data attributes

Iris CSS also reads three data attributes: `data-theme` for [themes](https://iriscss.com/documentation/customize/themes/index.html.md), `data-tooltip` for [tooltips](https://iriscss.com/documentation/components/tooltip/index.html.md) and `data-placement` for tooltips and [popovers](https://iriscss.com/documentation/elements/popover/index.html.md#placement).

---

## Focus and screen readers

Source: https://iriscss.com/documentation/accessibility/focus-and-screen-readers/

A visible focus ring for keyboard users, content for screen readers only, and a skip link.

### Focus ring

Every focusable element shows an outline when it gets keyboard focus, as WCAG 2.4.7 asks. Mouse clicks show no ring. Buttons, links and form controls draw the ring in their own color. Tab through the example to see it.

```html
<button class="primary">Button</button>
<a href="#">Link</a>
<button class="danger outlined">Outlined</button>
```

A `main`, `section`, `article` or heading with `tabindex="-1"`, such as the target of a skip link, shows no ring. Widgets that move focus with `tabindex="-1"`, such as menus, keep theirs. Every ring has at least 3:1 contrast with the page. The width is `--i-focus-ring-width` and the neutral color `--i-color-focus`.

### Screen reader only

`.sr-only` hides content on screen but keeps it for screen readers. `.sr-only-focusable` does the same until it or something inside it gets focus, for links and controls that should appear for keyboard users.

```html
<button aria-describedby="delete-hint">
  Delete
  <span id="delete-hint" class="sr-only">the project and all its files</span>
</button>
```

### Skip link

`.skip-to-content` is a link that shows only on keyboard focus, so keyboard users can jump past the navigation. Put it first in `body`. This site has one: press `Tab` right after the page loads.

```html
<body>
  <a href="#content" class="skip-to-content">Skip to content</a>
  <header>...</header>
  <main id="content">...</main>
</body>
```

### Touch and text direction

Links, buttons, form controls and summaries skip the double tap zoom delay on touch screens. `dir="rtl"` flips the layout, and icons such as the select chevron, the search magnifier, the validation icons and the breadcrumb divider move to the other side. A nested `dir="ltr"` flips them back.

---

## User preferences

Source: https://iriscss.com/documentation/accessibility/user-preferences/

Iris CSS follows the settings users choose in their system, with no setup.

| Preference | What Iris CSS does |
| --- | --- |
| `prefers-color-scheme` | Uses the light or dark colors. See [themes](https://iriscss.com/documentation/customize/themes/index.html.md). |
| `prefers-reduced-motion: reduce` | Makes Iris CSS transitions 1ms long, so they finish at once but still fire `transitionend`. Smooth scrolling, the skeleton shimmer and the indeterminate progress bar stop. Loading spinners keep turning, since they carry meaning. |
| `prefers-reduced-transparency: reduce` | Removes the blur behind modals and drawers. |
| `prefers-contrast: more` | Wider borders on form controls and table headers, a wider focus ring, and rules in the text color. |
| `forced-colors: active` | Underlines links, borders buttons, drops shadows and uses system colors for focus, disabled text, highlights and icons. |

### Testing

Browser developer tools can fake each preference. In Chrome and Edge, open the command menu and search for "Rendering", then pick the media feature to emulate. Firefox and Safari have similar settings.

### Your own styles

Iris CSS sets its duration and blur variables for these preferences with `!important`, so your own value for `--i-duration` cannot bring the motion back. Your own animations are yours to handle: run them only when the user has no motion preference.

```css
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: fade-in 0.6s ease-out; }
}
```

For motion done with JavaScript, such as a parallax effect, check the same media query.

```js
const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
```

---

## Selectors

Iris CSS styles plain HTML first. Most pages need no classes at all: write semantic HTML and it is styled, responsive and ready for light and dark mode.

Classes are optional. Use them when you want a variant, such as a colored or larger button. Class names have no prefix, for example `.outlined` or `.color-amber-50`. Only [CSS variables](variables.md) carry the `--i-` prefix.

Many Iris styles also react to standard HTML and ARIA attributes, such as `aria-busy="true"` for a loading spinner or `aria-invalid="true"` for a field with an error.

### Contents

- [Elements](#elements)
- [Classes](#classes)
  - [Layout](#layout)
  - [Display, alignment and overflow](#display-alignment-and-overflow)
  - [Colors](#colors)
  - [Styles](#styles)
  - [Sizes](#sizes)
  - [States](#states)
  - [Tables](#tables)
  - [Components](#components)
  - [Brand](#brand)
  - [Gradients](#gradients)
  - [Color palette](#color-palette)
  - [Accessibility](#accessibility)
- [Attributes](#attributes)

### Elements

These elements are styled without any class.

| Area | Elements |
|---|---|
| Document | `html`, `body`, with a root font size that grows smoothly with the viewport and light or dark colors. Native controls that Iris does not restyle, such as picker popups, use the primary color. Scrollbars follow the theme |
| Landmarks | `header`, `main`, `footer`, `section` |
| Print | When printed, the page is black on white, `nav`, `aside`, dialogs and popovers are hidden, external links show their address, and tables, figures, code and cards do not break across pages |
| Typography | `h1` to `h6`, `hgroup`, `p`, `small`, `strong`, `b`, `mark`, `ins`, `del`, `sub`, `sup`, `abbr[title]`, `blockquote`, `address`, `hr`, `math` (MathML uses a math font). Headings balance their lines and text blocks avoid a lone word on the last line. In Safari an opening quote mark in a `blockquote` hangs outside the text |
| Lists | `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `menu`. Bullets and numbers use the subtle color. A `menu` is a toolbar, so its items sit in a row |
| Links | `a` |
| Buttons | `button`, `input[type="submit"]`, `input[type="reset"]`, `input[type="button"]`, `input[type="file"]` (its button), `[role="button"]` |
| Forms | `form`, `fieldset`, `legend`, `label`, `input`, `select`, `option`, `optgroup`, `textarea`, `output` (even digit widths). In browsers that support a customizable `select`, its option list uses the dropdown colors |
| Input types | `checkbox`, `radio`, `range`, `color`, `date`, `datetime-local`, `month`, `time`, `week`, `file`, `search` |
| Tables | `table`, `caption`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`. Cells use even digit widths, and a `th` in `tbody` is bold as a row header |
| Code | `pre`, `code`, `kbd`, `samp`. Nest `kbd` for a key combination: `<kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>`. `var` stays in the text font |
| Media | `img`, `svg`, `picture`, `video`, `audio`, `canvas`, `iframe`, `object`, `embed`. Media scales down to fit its container. An `iframe` without `width` or `height` fills the width at 16:9. `audio` fills the width, the alt text of a broken `img` is italic and `track` captions use the theme font |
| Figures | `figure`, `figcaption` |
| Accordion | `details`, `summary` |
| Popover | any element with `popover`, opened by a button with `popovertarget`. It fades in, centered over the page. `data-placement` anchors it to the button |
| Modal | `dialog`, drawn as a card over a dimmed page. Open it with `showModal()`. `closedby="any"` closes it on a click outside where supported. It animates in and out, and the page stops scrolling while it is open |
| Navigation | `nav`, with `ul` or `ol`, `li` and `a`. Only the nav's own lists form the row, so nested lists keep their layout |
| Progress | `progress`, `meter`. A `meter` is green in its optimum range, yellow below it and red in the worst range, from its `low`, `high` and `optimum` attributes |

### Classes

#### Layout

| Class | Applies to | Effect |
|---|---|---|
| `.container` | any block | Centered content with a max width that grows at each breakpoint: 576px from 640px, 700px from 768px, 950px from 1024px, 1200px from 1280px and 1450px from 1536px |
| `.container-fluid` | any block | Full width content with side padding |
| `.grid` | any block | Children sit side by side in equal columns at least `--i-grid-column-min-width` (10rem) wide, and wrap onto new rows when the grid gets narrow, so it adapts to its container as well as the screen |
| `.span-full` | a child of `.grid` | Takes a whole row |
| `.stack` | any block | Stacks its children with an even gap between them |
| `.cluster` | any block | Puts its children in a row that wraps, such as tags or buttons |
| `.with-sidebar` | a wrapper with two children | The first child is a 16rem sidebar and the second takes the rest. They stack when the content would get narrower than half. `.end` puts the sidebar last |
| `.switcher` | any block | Its children sit in one row, or stack in one column once the container is narrower than 40rem. More than four children always stack |
| `.hero` | `section` or any block | Large intro band with centered text. A color class fills it with that color |

#### Display, alignment and overflow

Small utilities, one CSS property each.

| Class | Effect |
|---|---|
| `.hidden` | `display: none` |
| `.block` | `display: block` |
| `.inline-block` | `display: inline-block` |
| `.inline` | `display: inline` |
| `.flex` | `display: flex` |
| `.inline-flex` | `display: inline-flex` |
| `.contents` | `display: contents` |
| `.visible` | `visibility: visible` |
| `.invisible` | `visibility: hidden` |
| `.text-center` | `text-align: center` |
| `.justify-center` | `justify-content: center` |
| `.items-center` | `align-items: center` |
| `.mx-auto` | `margin-inline: auto` |
| `.overflow-auto` | `overflow: auto` |
| `.overflow-x-auto` | `overflow-x: auto` |
| `.overflow-y-auto` | `overflow-y: auto` |
| `.overflow-hidden` | `overflow: hidden` |
| `.overflow-clip` | `overflow: clip` |
| `.truncate` | One line, cut short with an ellipsis |
| `.line-clamp` | Keeps the first 3 lines (`--i-line-clamp-lines`), with an ellipsis |

#### Colors

A color class sets two variables on its element, `--i-variant` and `--i-variant-inverse`. Buttons and links build all their colors from them, so every color works with every [style](#styles) and [state](#states). On any other element, a color class sets the background and a matching text color.

| Class | Meaning |
|---|---|
| `.primary` | Main action |
| `.secondary` | Less important action. Also the default look of `input[type="reset"]` |
| `.contrast` | Highest contrast with the page: dark in light mode, light in dark mode |
| `.accent` | Highlight color |
| `.info` | Information |
| `.success` | Success |
| `.warning` | Warning |
| `.danger` | Error or destructive action |
| `.link` | Link color |

Each class uses its color family from [Color families](variables.md#color-families). On links, it changes the text and underline colors, with no background. On buttons, it changes the background, border, text and focus ring. On checkboxes, radios, switches, `progress`, tabs, steps and pagination, it changes the checked, filled or current color, which is primary by default. On alerts and badges, it sets their color.

```html
<button class="primary">Save</button>
<button class="danger outlined">Delete</button>
<button class="success light">Approved</button>
<a href="#" class="accent">Read more</a>
<input type="checkbox" class="danger" checked>
<progress class="success" value="70" max="100"></progress>
<p class="warning">Your trial ends tomorrow.</p>
```

For a color that is not in the list, set the two variables yourself:

```html
<button style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Custom</button>
```

#### Styles

| Class | Applies to | Effect |
|---|---|---|
| `.outlined` | buttons | Transparent background with a colored border and text. Works with every color class, for example `.primary.outlined` |
| `.outlined` | `.card`, `.box` | Transparent background with a border instead of a shadow |
| `.outlined` | inputs, selects, `.select` | Transparent background |
| `.rounded` | buttons, inputs, selects, `progress`, `meter`, `.group` | Pill shaped corners |
| `.rounded` | `.card`, `.box`, `pre`, `code`, `kbd`, `samp` | Larger rounded corners |
| `.square` | the same elements as `.rounded` | No rounded corners |
| `.tint` | buttons | Pale tint of the button color with dark text, in both themes. Works with every color class, for example `.danger.tint` |
| `.deep` | buttons | Deep shade of the button color with white text, in both themes. Works with every color class |
| `.light` | any element | Forces the light theme on the element and everything inside it, like `data-theme="light"`. On `pre`, `code`, `kbd` and `samp` it also switches to light code colors |
| `.dark` | any element | Forces the dark theme on the element and everything inside it, like `data-theme="dark"` |

#### Sizes

The default size needs no class.

| Class | Applies to |
|---|---|
| `.small` | buttons, inputs, selects, textareas, `table`, `.card`, `progress`, `meter`, `.group`, `.icon`, `.avatar` |
| `.medium` | the same elements |
| `.large` | the same elements |

On buttons and form controls the classes scale the padding and font size. On a `.group` they scale every control inside. On tables they change the cell padding and text size. On cards they change the padding. On `progress` and `meter` they change the bar height.

`.medium` is larger than the default.

#### States

These classes show a state without user interaction, for example in documentation or design previews. On buttons and links they work with every color and style.

| Class | Applies to | Effect |
|---|---|---|
| `.hover` | buttons, links, inputs, selects, textareas | Hover look |
| `.active` | the same elements | Active look, the same as hover |
| `.focus` | the same elements | Focus look, including the focus ring |
| `.disabled` | the same elements | Disabled look, and pointer events are turned off |

#### Tables

| Class | Applies to | Effect |
|---|---|---|
| `.striped` | `table` | Shades every other body row |
| `.hover` | `table` | Highlights the body row under the pointer |
| `.sticky` | `table` | Keeps the header row in view while the page scrolls. Inside `.table-responsive`, give the wrapper a `max-height` and the header sticks to it |
| `.table-responsive` | a wrapper around a table | Scrolls the table horizontally when it is too wide. Give it `tabindex="0"` and an `aria-label` so keyboard users can scroll it |

#### Components

| Class | Applies to | Effect |
|---|---|---|
| `.avatar` | `img` or `span` | Round picture or initials. `.small`, `.medium` and `.large` resize it, `.square` rounds the corners only, and a color class colors the initials |
| `.avatar-group` | a wrapper around avatars | Overlaps them in a row |
| `.alert` | any block element | Tinted message box with a colored bar on the start edge. Add a color class and `role="alert"` or `role="status"`. Links inside take the alert color |
| `.badge` | `span` or `a` | Small pill for counts, tags and labels. Sized from the surrounding text. Secondary by default. `.outlined` gives a border instead of a fill |
| `.box` | any block element, or `a` | Padded block with a background, rounded corners and a shadow. As a link, the whole box is clickable and lifts on hover |
| `.card` | any block element, usually `article` | Padded block with a background and a shadow. A direct `header` or `footer` becomes a tinted band. A `dialog` is always a card |
| `.carousel` | any block | A row of slides that scrolls sideways and snaps to each one. Browsers with CSS scroll buttons add previous and next buttons and a dot per slide. Give it `tabindex="0"` and an `aria-label` so keyboard users can reach it |
| `.divider` | `p` or `div` | A rule with text in the middle, such as "or". For a rule without text, use `hr` |
| `.drawer` | `dialog` | A modal that slides in from the end edge. `.start` uses the start edge and `.bottom` makes a bottom sheet. Open it with `showModal()` |
| `.dropdown` | a `ul` with `popover` | A menu of links or choices, opened by the button whose `popovertarget` points at it. It closes on Esc and on a click outside, opens below the button where anchor positioning works and flips near the edge of the screen. Put it right after the button, which gets a chevron. In a `nav`, a button without a class looks like a link |
| `.select` | a `button` that opens a `.dropdown` | Draws the button as a select, for a menu of choices. Takes sizes, styles and `aria-invalid` like a select |
| `.group` | any element holding inputs, selects and buttons, usually with `role="group"` | Joins them into one row. In or on `<search>` or `[role="search"]` the row gets pill ends. When `<search>` holds a `form`, put the class on the form |
| `.close` | a button inside a `dialog` | Close button with a cross icon. `rel="prev"` on a link does the same |
| `.pagination` | `nav` | Page links in an `ol` or `ul`. Mark the current page with `aria-current="page"` and unavailable links with `aria-disabled="true"`. Use a `span` for gaps |
| `.navbar` | `header` around a `nav` | Top bar with a background and a bottom border. The first list is the brand: a link with an optional logo. A list with `popover` and a `.nav-toggle` button collapse into a full width panel under the bar below a 48rem wide nav. `.sticky` keeps the bar at the top of the screen. A color class fills it. `aria-current="page"` marks the current link, and a button with `aria-label` and no class is drawn as a plain icon button |
| `.footer` | `footer`, usually a direct child of `body` | Page footer band with a background and a top border. The element holding the `nav` elements becomes a column grid, its first child is the brand when it is not a `nav`, and the element after the grid is the bottom row. Below a 48rem wide footer the brand spans the row and the bottom row stacks. `.sticky` keeps it at the bottom of short pages. A color class fills it |
| `.nav-toggle` | a `button` inside `nav` | Menu button for a link list with `popover`. Below a 48rem wide nav the list collapses behind it, and above that the list sits in the nav and the button hides |
| `.skeleton` | any element | Shimmering placeholder while content loads, one line tall by default. Set a width or height, and `aria-hidden="true"`. `.rounded` makes a circle or pill |
| `.steps` | `ol` | Numbered progress tracker. Mark the current step with `aria-current="step"`; earlier steps show as done |
| `.toast` | any block | Short message in the bottom end corner. Make it `popover="manual"` and open it with `showPopover()`, or put several in a `.toasts` region. Color classes set the color, and a `.close` button inside dismisses it |
| `.toasts` | a wrapper, with `aria-live="polite"` | Fixed region in the bottom end corner that stacks the toasts inside it |
| `.tabs` | a wrapper around `details` elements that share a `name` | The summaries become tabs and the open panel shows below. Browsers without `::details-content` show an accordion |
| `.breadcrumb` | `nav` | Breadcrumb navigation with a divider between items. Put an `ol` or `ul` inside |
| `.icon` | `span` or any inline element | Square box for an icon font or inline SVG, 1.5rem by default. Use `.small`, `.medium` or `.large` to resize |
| `.icon-text` | `span` or `div` | Puts an `.icon` and its text side by side. A `div.icon-text` spans the full width |

```html
<div class="box">Any content</div>
<a class="box rounded" href="/pricing">The whole box is a link</a>

<article class="card">
  <header><h3>Plan</h3></header>
  <p>Card body</p>
  <footer><button>Choose</button></footer>
</article>

<header class="navbar sticky">
  <nav class="container" aria-label="Main">
    <ul>
      <li><a href="/"><img src="logo.svg" alt=""> Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu" aria-label="Menu"></button>
    <ul id="menu" popover>
      <li><a href="/docs/" aria-current="page">Docs</a></li>
      <li><a href="/about/">About</a></li>
      <li><button class="primary">Sign in</button></li>
    </ul>
  </nav>
</header>

<footer class="footer sticky">
  <div class="container">
    <div>
      <div>
        <a href="/"><img src="logo.svg" alt=""> Brand</a>
        <p>Short tagline</p>
      </div>
      <nav aria-label="Product">
        <h2>Product</h2>
        <ul>
          <li><a href="/docs/">Docs</a></li>
          <li><a href="/pricing/">Pricing</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <p>&copy; 2026 Brand</p>
    </div>
  </div>
</footer>

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li>Docs</li>
  </ol>
</nav>

<div class="alert warning" role="alert">Your trial ends tomorrow.</div>
<h3>Inbox <span class="badge danger">4</span></h3>
<p class="divider">or</p>

<nav class="pagination" aria-label="Pagination">
  <ol>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2" aria-current="page">2</a></li>
    <li><span>…</span></li>
    <li><a href="?page=9">9</a></li>
  </ol>
</nav>

<ol class="steps">
  <li>Cart</li>
  <li aria-current="step">Payment</li>
  <li>Review</li>
</ol>

<div class="tabs">
  <details name="billing" open><summary>Monthly</summary>...</details>
  <details name="billing"><summary>Yearly</summary>...</details>
</div>

<div class="skeleton" aria-hidden="true" style="width: 60%"></div>

<button popovertarget="account">Account</button>
<ul id="account" popover class="dropdown">
  <li><a href="#">Profile</a></li>
  <li><a href="#">Sign out</a></li>
</ul>

<span class="icon-text">
  <span class="icon"><svg>...</svg></span>
  <span>Home</span>
</span>
```

#### Brand

For the brand name and logo text. They work on headings, `span`, `div` and `a`.

| Class | Color variable |
|---|---|
| `.brand` | `--i-color-brand` |
| `.brand-name` | `--i-color-brand-name` |
| `.brand-accent` | `--i-color-brand-accent` |

#### Gradients

`.gradient` paints a gradient background. Add a palette family to pick the colors, and optionally a direction or a radial shape.

| Class | Effect |
|---|---|
| `.gradient` | Linear gradient from left to right |
| `.to-top`, `.to-bottom`, `.to-left` | Change the direction |
| `.radial` | Radial gradient from the center, as a circle |
| `.ellipse` | Ellipse shape for `.radial` |
| `.radial-top`, `.radial-right`, `.radial-bottom`, `.radial-left` | Move the center of `.radial` |
| a family class | Colors: shades 200, 500 and 800 of that family. Without one, the gradient is gray |

Family classes: `.amber`, `.blue`, `.chartreuse`, `.cyan`, `.emerald`, `.fuchsia`, `.gray`, `.green`, `.indigo`, `.jade`, `.lime`, `.neutral`, `.orange`, `.pink`, `.purple`, `.red`, `.rose`, `.sky`, `.slate`, `.spring`, `.stone`, `.teal`, `.vermilion`, `.violet`, `.yellow`, `.zinc`.

Family classes only work together with `.gradient`.

```html
<div class="gradient emerald">Linear</div>
<div class="gradient radial ellipse radial-top violet">Radial</div>
```

#### Color palette

Two classes for every shade of the [color palette](variables.md#color-palette): 26 families with 11 shades each, so 572 classes in total.

| Pattern | Effect | Example |
|---|---|---|
| `.color-{family}-{shade}` | Text color | `.color-emerald-500` |
| `.background-{family}-{shade}` | Background color | `.background-rose-100` |

Families are the same 26 as in [Gradients](#gradients). Shades are `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` and `950`.

#### Accessibility

| Class | Effect |
|---|---|
| `.sr-only` | Hides content visually but keeps it for screen readers |
| `.sr-only-focusable` | Like `.sr-only` until it or something inside it receives focus, then it shows |
| `.skip-to-content` | A "skip to content" link that stays off screen until it receives keyboard focus |

### Attributes

#### ARIA

| Attribute | On | Effect |
|---|---|---|
| `aria-busy="true"` | any element except form controls | Shows a spinning loading icon before the content, in the element's text color. It does not block clicks or keys, so give a busy button `aria-disabled="true"` too |
| `aria-invalid="true"` | inputs, selects, textareas | Error style with a red border and icon |
| `aria-invalid="false"` | inputs, selects, textareas | Valid style with a green border and check icon |
| `aria-current` | links, buttons, nav links | Active look. `aria-current="false"` is ignored |
| `aria-disabled="true"` | any element | `not-allowed` cursor. Buttons fade like disabled ones but stay focusable, so the script that sets it must also ignore their clicks |
| `aria-controls` | any element except text fields | Pointer cursor |

A field without `aria-invalid` that fails native validation (`required`, `pattern`, `type="email"` and so on) gets the error style once the user has edited it. Set `aria-invalid` to take over.

#### Roles

| Attribute | On | Effect |
|---|---|---|
| `role="button"` | `a`, `summary`, any element | Looks like a button |
| `role="link"` | any element | Looks like a link |
| `role="search"` | an element holding a `.group` | The group gets pill corners, the same as inside `<search>` |
| `role="switch"` | `input[type="checkbox"]` | Toggle switch |

#### Data attributes

| Attribute | On | Effect |
|---|---|---|
| `data-theme="light"` or `"dark"` | `html` or any element | Forces a color scheme for the element and everything inside it. Without it, Iris follows the system setting |
| `data-tooltip` | any element except busy buttons, `.close`, `.nav-toggle`, `summary` and nav and step items, which draw their own pseudo elements | Shows the attribute's text as a tooltip on hover and focus |
| `data-placement` | an element with `data-tooltip` | Tooltip position: `top` (default), `right`, `bottom` or `left` |
| `popover="hint"` | an element opened by a button with `interestfor` | A tooltip that the browser shows on hover and focus and closes with Esc, anchored to the button and flipped away from the screen edge. `data-placement` works the same. Browsers without `interestfor` do not show it |
| `data-placement` | an element with `popover` | Anchors the popover to the button that opens it: `bottom`, `top`, `left` or `right`. Without it, or where anchor positioning is not supported, the popover is centered |

```html
<html data-theme="dark">
<section data-theme="light">...</section>
<button data-tooltip="Saves your changes" data-placement="bottom">Save</button>
<button popovertarget="help">Help</button>
<div id="help" popover data-placement="bottom">...</div>
```

#### Other attributes

| Attribute | On | Effect |
|---|---|---|
| `disabled` | buttons and form controls | Disabled look and `not-allowed` cursor |
| `readonly` | inputs, textareas | No active or focus border |
| `rows` | `textarea` | Fixed height. Without it, a textarea grows with its text from 4 to 16 lines in browsers that support `field-sizing` |
| `open` | `details` | Open accordion |
| `multiple`, `size` | `select` | List box instead of a dropdown, without the arrow icon |
| `rel="prev"` | a link inside a `dialog` | Close button, the same as `.close` |
| `title` | `abbr` | Dotted underline and help cursor |
| `value` | `progress` | Without `value`, `progress` shows an animated indeterminate bar |
| `controls` | `audio` | `audio` without `controls` is hidden |
| `fill` | `svg` | An `svg` without `fill` uses the current text color |
| `tabindex` | any element | Faster tap response on touch screens |
| `dir="rtl"` | any element | Right to left layout |

---

## CSS variables

Iris CSS is built on CSS custom properties. Every value the framework uses, from spacing to button colors, comes from a variable you can override.

All variables start with `--i-`. Classes have no prefix, but custom properties are global and inherited, so the prefix keeps Iris from clashing with your own variables or with other libraries such as Tailwind.

This page lists all of them. It is generated from the source in `src`, so the values below are the real defaults.

### How to override

Set a variable on `:root` to change it everywhere:

```css
:root {
  --i-color-primary: #7c3aed;
  --i-border-radius: 0.5rem;
}
```

A theme color set on `:root` also reaches nested themes (`data-theme`, `.light`, `.dark`). Browsers without `light-dark()` (Chrome before 123, Firefox before 120, Safari before 17.5) recompute theme colors on each nested theme, so there a `:root` override stops at them. To cover those browsers too, set it on `:root, [data-theme], .light, .dark`.

Set it on any element to change it only inside that element:

```html
<section style="--i-spacing: 2rem">...</section>
```

Iris puts every rule in a cascade layer (`iris.variables`, `iris.base`, `iris.elements`, `iris.forms`, `iris.components`, `iris.layout`, `iris.modifiers`, `iris.utilities`, `iris.accessibility`, `iris.print`). Your own unlayered CSS always wins over Iris, whatever its specificity. To put your styles between Iris layers, use `@layer iris, app;` and write them in `@layer app`.

Colors are derived with `color-mix()` where they are used. Changing `--i-color-primary` updates every primary button, link, hover state, border and focus ring.

### Light and dark themes

Every theme color is one `light-dark()` pair, for example `--i-color-text: light-dark(#373c44, #c2c7d0)`. The browser picks the value from the element's `color-scheme`:

- Without `data-theme`, the page follows the system setting.
- `data-theme="light"` or `data-theme="dark"`, or the `.light` and `.dark` classes, force a scheme on an element and everything inside it, so a nested `<section data-theme="dark">` works with no extra CSS.

To change a color, override it with your own pair:

```css
:root {
  --i-color-primary: light-dark(#7c3aed, #a78bfa);
}
```

A single color, without `light-dark()`, is used in both schemes. The build adds a fallback for browsers without `light-dark()`, so `dist` works back to Chrome 111 and Safari 16.2. The fallback only covers the variables Iris declares; a `light-dark()` you write in your own CSS needs a recent browser. In the tables below, the **Dark** column shows the dark value, and **same** means one value serves both.

### Contents

- [Global tokens](#global-tokens)
- [Theme colors](#theme-colors)
- [Base](#base)
- [Elements](#elements)
- [Forms](#forms)
- [Components](#components)
- [Layout](#layout)
- [Utilities](#utilities)
- [Gradients](#gradients)
- [Icons](#icons)
- [Color palette](#color-palette)
- [Variables set per element](#variables-set-per-element)
- [Notes for maintainers](#notes-for-maintainers)

### Global tokens

Values read across the whole framework.

#### Typography

`--i-font-size` is the root font size. It starts at the size the user set in the browser and grows smoothly to 112.5% between a 576px and a 1280px wide viewport. Source: `variables/typography.css`.

| Variable | Value |
|---|---|
| `--i-font-emoji` | `"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "T…` |
| `--i-font-sans` | `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro…` |
| `--i-font-mono` | `ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consol…` |
| `--i-font-family` | `var(--i-font-sans)` |
| `--i-line-height` | `1.5` |
| `--i-font-weight` | `400` |
| `--i-font-size` | `clamp(100%, 89.75% + 0.285svw, 112.5%)` |
| `--i-text-underline-offset` | `0.125em` |

#### Spacing

`--i-spacing` is the base unit, and most other spacing values are derived from it. `block` is top and bottom, `inline` is left and right. Source: `variables/spacing.css`.

| Variable | Value |
|---|---|
| `--i-spacing` | `1rem` |
| `--i-typography-spacing` | `1rem` |
| `--i-section-spacing-block` | `var(--i-spacing)` |
| `--i-section-spacing-inline` | `var(--i-spacing)` |

#### Borders and radius

`--i-focus-ring-width` sizes focus outlines and the focus rings drawn with `box-shadow`. Source: `variables/borders.css`.

| Variable | Value |
|---|---|
| `--i-border-radius-small` | `0.125rem` |
| `--i-border-radius` | `0.25rem` |
| `--i-border-radius-medium` | `0.375rem` |
| `--i-border-radius-large` | `0.5rem` |
| `--i-border-radius-xlarge` | `0.75rem` |
| `--i-border-radius-pill` | `9999px` |
| `--i-border-width` | `0.0625rem` |
| `--i-focus-ring-width` | `0.125rem` |

#### Motion

Every Iris transition uses `var(--i-duration) var(--i-easing)`. Set `--i-duration: 0s` to turn transitions off. Source: `variables/styles.css`.

| Variable | Value |
|---|---|
| `--i-duration` | `0.2s` |
| `--i-easing` | `ease-in-out` |

#### High contrast

Applied when the user asks for more contrast (`prefers-contrast: more`): they replace `--i-border-width` and `--i-focus-ring-width`. Source: `variables/accessibility/contrast.css`.

| Variable | Value |
|---|---|
| `--i-contrast-border-width` | `0.125rem` |
| `--i-contrast-focus-ring-width` | `0.1875rem` |

### Theme colors

Global colors, read by many elements and components. Colors owned by one element or component are listed with it below.

#### Page colors

Source: `variables/themes/styles.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-color-text` | `#373c44` | `#c2c7d0` |
| `--i-color-background` | `var(--i-color-white)` | `#13171f` |
| `--i-color-light` | `var(--i-color-white)` | same |
| `--i-color-dark` | `var(--i-color-black)` | same |
| `--i-color-brand` | `#b31fc6` | `#e12afb` |
| `--i-color-brand-dark` | `#a800b7` | same |
| `--i-color-brand-light` | `#f4a8ff` | same |
| `--i-color-brand-name` | `var(--i-color-brand-dark)` | `#e47ef0` |
| `--i-color-brand-accent` | `#b31fc6` | `var(--i-color-brand-light)` |
| `--i-color-subtle` | `#646b79` | `#848d9e` |
| `--i-color-subtle-border` | `#e7eaf0` | `#202632` |
| `--i-color-shadow` | `#8191b5` | `#07090c` |
| `--i-shadow` | layered shadow in `--i-color-shadow` (7 layers) | same |

#### Mix targets

Hover colors, borders and colored text are mixed from a color and one of these two targets with `color-mix()`. Ink is the strongest text tone of the theme and paper is the page background, so the same rule darkens in light mode and lightens in dark mode. Source: `variables/themes/styles.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-color-ink` | `var(--i-color-black)` | `var(--i-color-white)` |
| `--i-color-paper` | `var(--i-color-white)` | `#13171f` |

#### Color families

Each color class, such as `.primary` or `.danger`, uses one family. A family is only two variables: the color and the text color used on top of it. Everything else (hover, border, focus ring, tints for `.tint` and `.deep`) is computed from these two where it is used. `--i-color-base` is the neutral color of buttons and links without a color class, and `--i-color-focus` is the default focus ring. Source: `variables/themes/styles.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-color-base` | `#8e9fbc` | `#c2c7d0` |
| `--i-color-focus` | `color-mix(in oklab, var(--i-color-base), var(--i-color-ink) 40%)` | same |
| `--i-color-primary` | `#00d5be` | `#05cc47` |
| `--i-color-primary-inverse` | `var(--i-color-slate-900)` | same |
| `--i-color-secondary` | `#5d6b89` | `#525f7a` |
| `--i-color-secondary-inverse` | `var(--i-color-white)` | same |
| `--i-color-contrast` | `#1c2840` | `#eff1f4` |
| `--i-color-contrast-inverse` | `var(--i-color-white)` | `var(--i-color-black)` |
| `--i-color-accent` | `#ffb900` | same |
| `--i-color-accent-inverse` | `var(--i-color-slate-900)` | same |
| `--i-color-info` | `var(--i-color-cyan)` | same |
| `--i-color-info-inverse` | `var(--i-color-slate-900)` | same |
| `--i-color-success` | `var(--i-color-green)` | same |
| `--i-color-success-inverse` | `var(--i-color-slate-900)` | same |
| `--i-color-warning` | `var(--i-color-yellow)` | same |
| `--i-color-warning-inverse` | `var(--i-color-slate-900)` | same |
| `--i-color-danger` | `var(--i-color-red-600)` | same |
| `--i-color-danger-inverse` | `var(--i-color-white)` | same |
| `--i-color-link` | `var(--i-color-blue-600)` | same |
| `--i-color-link-inverse` | `var(--i-color-white)` | same |

### Base

#### Document

Source: `variables/base/document.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-selection-color-background` | `#05cc4740` | `#05cc4730` |
| `--i-scrollbar-color-thumb` | `color-mix(in oklab, var(--i-color-subtle) 50%, transparent)` | same |
| `--i-scrollbar-color-track` | `transparent` | same |

### Elements

#### Typography

Headings, small text, `mark`, `ins`, `del` and `blockquote`. Source: `variables/elements/typography.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-small-font-size` | `0.875em` | same |
| `--i-heading-font-weight` | `700` | same |
| `--i-h1-font-size` | `2rem` | same |
| `--i-h1-line-height` | `1.125` | same |
| `--i-h1-margin-top` | `3rem` | same |
| `--i-h2-font-size` | `1.7rem` | same |
| `--i-h2-line-height` | `1.15` | same |
| `--i-h2-margin-top` | `2.625rem` | same |
| `--i-h3-font-size` | `1.5rem` | same |
| `--i-h3-line-height` | `1.175` | same |
| `--i-h3-margin-top` | `2.25rem` | same |
| `--i-h4-font-size` | `1.3rem` | same |
| `--i-h4-line-height` | `1.2` | same |
| `--i-h4-margin-top` | `1.875rem` | same |
| `--i-h5-font-size` | `1.2rem` | same |
| `--i-h5-line-height` | `1.225` | same |
| `--i-h5-margin-top` | `1.6875rem` | same |
| `--i-h6-font-size` | `1.1rem` | same |
| `--i-h6-line-height` | `1.25` | same |
| `--i-h6-margin-top` | `1.5rem` | same |
| `--i-h1-color-text` | `#2d3138` | `#f0f1f3` |
| `--i-h2-color-text` | `#373c44` | `#e0e3e7` |
| `--i-h3-color-text` | `#424751` | `#c2c7d0` |
| `--i-h4-color-text` | `#4d535e` | `#b3b9c5` |
| `--i-h5-color-text` | `#5c6370` | `#a4acba` |
| `--i-h6-color-text` | `#646b79` | `#8891a4` |
| `--i-mark-color-text` | `#0f1114` | `var(--i-color-white)` |
| `--i-mark-color-background` | `#feeaca` | `#014063` |
| `--i-ins-color-text` | `#1d6a54` | `#62af9a` |
| `--i-del-color-text` | `#883835` | `#cd7e7b` |
| `--i-blockquote-color-border` | `var(--i-color-subtle-border)` | same |
| `--i-blockquote-footer-color-text` | `var(--i-color-subtle)` | same |

#### List

Source: `variables/elements/list.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-list-marker-color-text` | `var(--i-color-subtle)` | same |

#### Link

Source: `variables/elements/link.css`.

| Variable | Value |
|---|---|
| `--i-link-text-decoration` | `underline` |

#### Button

Source: `variables/elements/button.css`.

| Variable | Value |
|---|---|
| `--i-button-shadow` | `0 0 0 #0000` |
| `--i-button-hover-shadow` | `0 0 0 #0000` |

#### Table

Source: `variables/elements/table.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-table-header-border-width` | `var(--i-border-width)` | same |
| `--i-table-header-font-weight` | `600` | same |
| `--i-table-color-border` | `var(--i-color-subtle-border)` | same |
| `--i-table-header-color-background` | `var(--i-color-background)` | same |
| `--i-table-row-striped-color-background` | `#6f78870a` | same |
| `--i-table-row-hover-color-background` | `color-mix(in oklab, var(--i-color-text) 8%, transparent)` | same |

#### Video captions

Source: `variables/elements/media.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-cue-color-text` | `var(--i-color-white)` | same |
| `--i-cue-color-background` | `#000c` | same |

#### Code and kbd

Source: `variables/elements/code.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-code-font-family` | `var(--i-font-mono)` | same |
| `--i-code-font-size` | `0.85em` | same |
| `--i-code-padding-block` | `0.125rem` | same |
| `--i-code-padding-inline` | `0.35rem` | same |
| `--i-kbd-font-weight` | `bolder` | same |
| `--i-code-color-text` | `var(--i-color-slate-200)` | `#8891a4` |
| `--i-code-color-background` | `var(--i-color-slate-700)` | `#1a1f28` |
| `--i-kbd-color-text` | `var(--i-code-color-text)` | `var(--i-color-background)` |
| `--i-kbd-color-background` | `var(--i-code-color-background)` | `var(--i-color-text)` |
| `--i-code-light-color-text` | `var(--i-color-slate-700)` | same |
| `--i-code-light-color-background` | `var(--i-color-slate-200)` | same |

#### Meter

Source: `variables/elements/meter.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-meter-color-optimum` | `var(--i-color-success)` | same |
| `--i-meter-color-suboptimum` | `var(--i-color-warning)` | same |
| `--i-meter-color-poor` | `var(--i-color-danger)` | same |

#### Progress

Source: `variables/elements/progress.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-progress-duration` | `1s` | same |
| `--i-progress-color-background` | `#dfe3eb` | `#202632` |
| `--i-progress-color-bar` | `var(--i-color-primary)` | same |

#### Popover

Source: `variables/elements/popover.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-popover-max-width` | `20rem` | same |
| `--i-popover-offset` | `calc(var(--i-spacing) * 0.25)` | same |
| `--i-popover-duration` | `var(--i-duration)` | same |
| `--i-popover-color-background` | `var(--i-dropdown-color-background)` | same |
| `--i-popover-color-border` | `var(--i-dropdown-color-border)` | same |
| `--i-popover-shadow` | `var(--i-dropdown-shadow)` | same |
| `--i-popover-color-text` | `var(--i-dropdown-color-text)` | same |

### Forms

#### Controls and inputs

`--i-control-*` applies to buttons and inputs. `--i-input-*` applies to text inputs, `select` and `textarea`, including their `:valid` and `:invalid` states. Source: `variables/forms/basics.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-control-padding-block` | `0.4rem` | same |
| `--i-control-padding-inline` | `0.875rem` | same |
| `--i-control-disabled-opacity` | `0.5` | same |
| `--i-label-font-weight` | `var(--i-font-weight)` | same |
| `--i-input-outline-width` | `var(--i-focus-ring-width)` | same |
| `--i-textarea-min-height` | `4lh` | same |
| `--i-textarea-max-height` | `16lh` | same |
| `--i-input-color-text` | `#23262c` | `#e0e3e7` |
| `--i-input-color-background` | `#fbfcfd` | `#1c212c` |
| `--i-input-color-border` | `#878fa2` | `#636c84` |
| `--i-input-color-placeholder` | `var(--i-color-subtle)` | `#8891a4` |
| `--i-input-selected-color-background` | `#dfe3eb` | `#2a3140` |
| `--i-input-active-color-background` | `var(--i-color-white)` | `#1a1f28` |
| `--i-input-active-color-border` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-in…` | same |
| `--i-input-focus-color-outline` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-in…` | same |
| `--i-input-button-focus-color-outline` | `var(--i-input-focus-color-outline)` | same |
| `--i-input-invalid-color-border` | `var(--i-color-danger)` | same |
| `--i-input-invalid-active-color-border` | `color-mix(in oklab, var(--i-color-danger), var(--i-color-ink…` | same |
| `--i-input-invalid-focus-color-outline` | `var(--i-input-invalid-active-color-border)` | same |
| `--i-input-valid-color-border` | `color-mix(in oklab, var(--i-color-success), var(--i-color-in…` | same |
| `--i-input-valid-active-color-border` | `color-mix(in oklab, var(--i-color-success), var(--i-color-in…` | same |
| `--i-input-valid-focus-color-outline` | `var(--i-input-valid-active-color-border)` | same |

#### Checkbox, radio and switch

Source: `variables/forms/checkbox-radio-switch.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-checkbox-radio-border-width` | `0.125rem` | same |
| `--i-switch-border-width` | `0.1875rem` | same |
| `--i-switch-thumb-shadow` | `0 0 0 #0000` | same |
| `--i-switch-color-background` | `#8790a3` | `#5f6880` |
| `--i-switch-color-thumb` | `var(--i-color-white)` | same |

#### Range

Source: `variables/forms/input-range.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-range-color-track` | `#8790a3` | `#5f6880` |
| `--i-range-active-color-track` | `#6f788c` | `#7b849a` |
| `--i-range-color-thumb` | `var(--i-color-secondary)` | same |
| `--i-range-thumb-color-border` | `var(--i-color-background)` | same |

#### Search inputs

Source: `variables/forms/input-search.css`.

| Variable | Value |
|---|---|
| `--i-input-search-border-radius` | `var(--i-border-radius-pill)` |

#### Date inputs

Source: `variables/forms/input-date.css`.

| Variable | Value |
|---|---|
| `--i-input-date-icon-size` | `1rem` |

### Components

#### Accordion

Source: `variables/components/accordion.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-accordion-summary-color-text` | `var(--i-color-text)` | same |
| `--i-accordion-summary-hover-color-text` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-in…` | same |

#### Alert

Source: `variables/components/alert.css`.

| Variable | Value |
|---|---|
| `--i-alert-padding-block` | `calc(var(--i-spacing) * 0.75)` |
| `--i-alert-padding-inline` | `var(--i-spacing)` |
| `--i-alert-accent-width` | `0.25rem` |

#### Avatar

Source: `variables/components/avatar.css`.

| Variable | Value |
|---|---|
| `--i-avatar-size` | `2.5rem` |
| `--i-avatar-size-small` | `2rem` |
| `--i-avatar-size-medium` | `3rem` |
| `--i-avatar-size-large` | `4rem` |
| `--i-avatar-group-overlap` | `0.2` |

#### Badge

Source: `variables/components/badge.css`.

| Variable | Value |
|---|---|
| `--i-badge-font-size` | `0.75em` |
| `--i-badge-padding-block` | `0.125em` |
| `--i-badge-trimmed-padding-block` | `0.4em` |
| `--i-badge-padding-inline` | `0.5em` |

#### Box

The `.box` component: a padded block with a background, radius and shadow. `.rounded`, `.square` and `.outlined` work on it. The hover and active shadows apply when the box is a link. Source: `variables/components/box.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-box-color-text` | `var(--i-color-text)` | same |
| `--i-box-color-background` | `var(--i-color-background)` | same |
| `--i-box-color-border` | `var(--i-color-subtle-border)` | same |
| `--i-box-padding` | `1.25rem` | same |
| `--i-box-border-radius` | `var(--i-border-radius)` | same |
| `--i-box-shadow` | `var(--i-shadow)` | same |
| `--i-box-hover-shadow` | `0 0.5em 1em -0.125em color-mix(in oklab, var(--i-color-text)…` | same |
| `--i-box-active-shadow` | `inset 0 0.0625rem 0.125rem color-mix(in oklab, var(--i-color…` | same |

#### Card

The header and footer padding is the card padding times `--i-card-section-padding-scale`, so it follows the `.small`, `.medium` and `.large` sizes. Source: `variables/components/card.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-card-section-padding-scale` | `0.66` | same |
| `--i-card-color-background` | `var(--i-color-background)` | `#181c25` |
| `--i-card-color-border` | `var(--i-color-subtle-border)` | `var(--i-card-color-background)` |
| `--i-card-section-color-background` | `#fbfcfd` | `#1a1f28` |
| `--i-card-shadow` | `var(--i-shadow)` | same |

#### Carousel

Source: `variables/components/carousel.css`.

| Variable | Value |
|---|---|
| `--i-carousel-item-width` | `100%` |
| `--i-carousel-gap` | `var(--i-spacing)` |
| `--i-carousel-button-size` | `2.5rem` |
| `--i-carousel-marker-size` | `0.625rem` |

#### Drawer

Source: `variables/components/drawer.css`.

| Variable | Value |
|---|---|
| `--i-drawer-width` | `20rem` |
| `--i-drawer-max-height` | `80dvh` |

#### Dropdown

Source: `variables/components/dropdown.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-dropdown-offset` | `0.0625rem` | same |
| `--i-dropdown-color-text` | `var(--i-color-text)` | same |
| `--i-dropdown-color-background` | `var(--i-color-white)` | `#181c25` |
| `--i-dropdown-color-border` | `#eff1f4` | `#202632` |
| `--i-dropdown-hover-color-background` | `#eff1f4` | `#202632` |
| `--i-dropdown-shadow` | `var(--i-shadow)` | same |

#### Footer

`--i-footer-column-min-width` is how narrow a link column gets before the columns wrap to a new row. Source: `variables/components/footer.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-footer-padding-block` | `2.5rem` | same |
| `--i-footer-font-size` | `0.9375rem` | same |
| `--i-footer-gap` | `2rem` | same |
| `--i-footer-column-min-width` | `8rem` | same |
| `--i-footer-heading-font-size` | `0.8125rem` | same |
| `--i-footer-brand-font-size` | `1.25rem` | same |
| `--i-footer-brand-image-height` | `1.75rem` | same |
| `--i-footer-color-text` | `var(--i-color-subtle)` | same |
| `--i-footer-color-background` | `color-mix(in oklab, var(--i-color-subtle) 7%, var(--i-color-…` | same |
| `--i-footer-color-border` | `var(--i-color-subtle-border)` | same |

#### Group

Source: `variables/components/group.css`.

| Variable | Value |
|---|---|
| `--i-group-button-padding-inline` | `2rem` |
| `--i-group-search-border-radius` | `var(--i-border-radius-pill)` |

#### Icon

Source: `variables/components/icon.css`.

| Variable | Value |
|---|---|
| `--i-icon-size` | `1.5rem` |
| `--i-icon-size-small` | `1rem` |
| `--i-icon-size-medium` | `2rem` |
| `--i-icon-size-large` | `3rem` |
| `--i-icon-color-text` | `inherit` |
| `--i-icon-text-gap` | `0.25em` |

#### Loader

Source: `variables/components/loader.css`.

| Variable | Value |
|---|---|
| `--i-loader-duration` | `0.75s` |

#### Modal

Source: `variables/components/modal.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-modal-max-width` | `43.75rem` | same |
| `--i-modal-overlay-backdrop-filter` | `blur(0.375rem)` | same |
| `--i-modal-duration` | `0.3s` | same |
| `--i-modal-overlay-color-background` | `#e8eaedbf` | `#08090abf` |

#### Nav

Source: `variables/components/nav.css`.

| Variable | Value |
|---|---|
| `--i-nav-item-padding-block` | `1rem` |
| `--i-nav-gap` | `1rem` |
| `--i-nav-link-padding-block` | `0.5rem` |
| `--i-nav-link-padding-inline` | `0.5rem` |
| `--i-nav-breadcrumb-divider` | `">"` |

#### Navbar

`--i-navbar-height` is the bar's minimum height. Browsers without anchor positioning also open the mobile menu panel at this distance from the top. Source: `variables/components/navbar.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-navbar-height` | `4rem` | same |
| `--i-navbar-brand-font-size` | `1.25rem` | same |
| `--i-navbar-brand-image-height` | `2rem` | same |
| `--i-navbar-z-index` | `90` | same |
| `--i-navbar-color-background` | `var(--i-color-background)` | same |
| `--i-navbar-color-border` | `var(--i-color-subtle-border)` | same |

#### Skeleton

Source: `variables/components/skeleton.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-skeleton-duration` | `1.5s` | same |
| `--i-skeleton-color-background` | `color-mix(in oklab, var(--i-color-text) 10%, var(--i-color-b…` | same |
| `--i-skeleton-color-highlight` | `color-mix(in oklab, var(--i-color-text) 4%, var(--i-color-ba…` | same |

#### Skip to content

Source: `variables/components/skip-to-content.css`.

| Variable | Value |
|---|---|
| `--i-skip-to-content-z-index` | `9999` |

#### Steps

Source: `variables/components/steps.css`.

| Variable | Value |
|---|---|
| `--i-steps-marker-size` | `2rem` |
| `--i-steps-line-width` | `0.125rem` |

#### Tabs

Source: `variables/components/tabs.css`.

| Variable | Value |
|---|---|
| `--i-tabs-indicator-width` | `0.125rem` |

#### Toast

Source: `variables/components/toast.css`.

| Variable | Value |
|---|---|
| `--i-toast-max-width` | `24rem` |
| `--i-toast-offset` | `var(--i-spacing)` |
| `--i-toast-gap` | `calc(var(--i-spacing) * 0.5)` |
| `--i-toast-padding-block` | `calc(var(--i-spacing) * 0.75)` |
| `--i-toast-padding-inline` | `var(--i-spacing)` |
| `--i-toast-duration` | `0.3s` |
| `--i-toast-z-index` | `1000` |

#### Tooltip

Source: `variables/components/tooltip.css`.

| Variable | Light | Dark |
|---|---|---|
| `--i-tooltip-max-width` | `20rem` | same |
| `--i-tooltip-caret-size` | `0.3rem` | same |
| `--i-tooltip-z-index` | `99` | same |
| `--i-tooltip-color-text` | `var(--i-color-contrast-inverse)` | same |
| `--i-tooltip-color-background` | `var(--i-color-contrast)` | same |

### Layout

#### Container

`.container` is as wide as `--i-container-max-width`, which steps up at each breakpoint: 100% on phones, then 576px, 700px, 950px, 1200px and 1450px from viewports 640px, 768px, 1024px, 1280px and 1536px wide. The side padding drops to 0 from 640px. Source: `variables/layout/container.css`.

| Variable | Value |
|---|---|
| `--i-container-max-width` | `100%` |
| `--i-container-padding-inline` | `var(--i-spacing)` |

#### Grid

`.grid` columns are at least `--i-grid-column-min-width` wide and wrap onto new rows below that. Source: `variables/layout/grid.css`.

| Variable | Value |
|---|---|
| `--i-grid-column-gap` | `var(--i-spacing)` |
| `--i-grid-row-gap` | `var(--i-spacing)` |
| `--i-grid-column-min-width` | `10rem` |

#### Layout primitives

Source: `variables/layout/primitives.css`.

| Variable | Value |
|---|---|
| `--i-stack-gap` | `var(--i-spacing)` |
| `--i-cluster-gap` | `calc(var(--i-spacing) * 0.5)` |
| `--i-sidebar-gap` | `var(--i-spacing)` |
| `--i-sidebar-width` | `16rem` |
| `--i-sidebar-content-min-width` | `50%` |
| `--i-switcher-gap` | `var(--i-spacing)` |
| `--i-switcher-threshold` | `40rem` |

#### Hero

Source: `variables/layout/hero.css`.

| Variable | Value |
|---|---|
| `--i-hero-min-height` | `min(60svh, 32rem)` |
| `--i-hero-padding-block` | `calc(var(--i-spacing) * 4)` |
| `--i-hero-font-size` | `clamp(2.25rem, 1.5rem + 3svw, 3.5rem)` |
| `--i-hero-text-font-size` | `1.25rem` |
| `--i-hero-text-max-width` | `40rem` |

### Utilities

#### Overflow

Source: `variables/utilities/overflow.css`.

| Variable | Value |
|---|---|
| `--i-line-clamp-lines` | `3` |

### Gradients

Defaults for the `.gradient` classes. Source: `variables/colors/gradients.css`. The gradient classes set these on their element, and you can set them inline:

```html
<div class="gradient" style="--i-gradient-stops: #ff0000, #0000ff">...</div>
```

| Variable | Default | Set by |
|---|---|---|
| `--i-gradient-stops` | `var(--i-color-gray-200), var(--i-color-gray-500), var(--i-co…` | `.gradient` color classes, such as `.blue` |
| `--i-gradient-direction` | `to right` | `.to-top`, `.to-bottom`, `.to-left` |
| `--i-gradient-shape` | `circle` | `.ellipse` |
| `--i-gradient-position` | `center` | `.radial-top`, `.radial-right`, `.radial-bottom`, `.radial-left` |

### Icons

Icons are SVG data URIs from [Bootstrap Icons](https://icons.getbootstrap.com/) (MIT). Source: `variables/icons.css`. Each one has its color baked into the SVG, so it looks the same in light and dark mode. To replace one, set the variable to your own `url("data:image/svg+xml,...")`. Inputs cannot draw a masked icon, so the valid and invalid icons do not follow `--i-color-success` and `--i-color-danger`. Replace them when you change those colors.

| Variable | Icon | Color |
|---|---|---|
| `--i-svg-checkmark` | Check mark, used in checked checkboxes | `#fff` |
| `--i-svg-chevron-down` | Down arrow, used in selects, dropdowns and accordions | `#8891a4` |
| `--i-svg-close` | Close cross, used in modals | `#8891a4` |
| `--i-svg-dash` | Dash, used in indeterminate checkboxes | `#fff` |
| `--i-svg-date` | Calendar, used in date inputs | `#8891a4` |
| `--i-svg-invalid` | Exclamation mark, shown on invalid inputs | `#e7000b`, the red 600 shade behind `--i-color-danger` |
| `--i-svg-loading` | Spinner, used with `aria-busy="true"` and rotated with CSS | `#8891a4` |
| `--i-svg-menu` | Three lines, used in `.nav-toggle` | `#8891a4` |
| `--i-svg-search` | Magnifier, used in search inputs | `#8891a4` |
| `--i-svg-time` | Clock, used in time inputs | `#8891a4` |
| `--i-svg-valid` | Check mark, shown on valid inputs | `#00a63e`, the green 600 shade near `--i-color-success` |

### Color palette

Source: `variables/colors/palette.css`. 26 color families with 11 shades each, from `50` (lightest) to `950` (darkest). The palette does not change between light and dark mode.

Each shade is a variable named `--i-color-{family}-{shade}`, for example `--i-color-emerald-500`. Each family also has a base variable, `--i-color-{family}`.

| Family | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 | Base |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| amber | `#fffbeb` | `#fef3c6` | `#fee685` | `#ffd230` | `#ffb900` | `#fe9a00` | `#e17100` | `#bb4d00` | `#973c00` | `#7b3306` | `#461901` | `#fe9a00` |
| blue | `#eff6ff` | `#dbeafe` | `#bedbff` | `#8ec5ff` | `#51a2ff` | `#2b7fff` | `#155dfc` | `#1447e6` | `#193cb8` | `#1c398e` | `#162456` | `#2b7fff` |
| chartreuse | `#fbfde8` | `#f5fbc6` | `#ecf58f` | `#ddea39` | `#ccd700` | `#b6c000` | `#979600` | `#786e00` | `#635700` | `#54490c` | `#2e2704` | `#b6c000` |
| cyan | `#ecfeff` | `#cefafe` | `#a2f4fd` | `#53eafd` | `#00d3f2` | `#00b8db` | `#0092b8` | `#007595` | `#005f78` | `#104e64` | `#053345` | `#00b8db` |
| emerald | `#ecfdf5` | `#d0fae5` | `#a4f4cf` | `#5ee9b5` | `#00d492` | `#00bc7d` | `#009966` | `#007a55` | `#006045` | `#004f3b` | `#002c22` | `#00bc7d` |
| fuchsia | `#fdf4ff` | `#fae8ff` | `#f6cfff` | `#f4a8ff` | `#ed6aff` | `#e12afb` | `#c800de` | `#a800b7` | `#8a0194` | `#721378` | `#4b004f` | `#e12afb` |
| gray | `#f9fafb` | `#f2f4f7` | `#e4e6ed` | `#d0d4de` | `#97a0b2` | `#687185` | `#485468` | `#344056` | `#1d283b` | `#0f172a` | `#030713` | `#687185` |
| green | `#f0fdf4` | `#dcfce7` | `#b9f8cf` | `#7bf1a8` | `#05df72` | `#00c950` | `#00a63e` | `#008236` | `#016630` | `#0d542b` | `#032e15` | `#00c950` |
| indigo | `#eef2ff` | `#e0e7ff` | `#c6d2ff` | `#a3b3ff` | `#7c86ff` | `#615fff` | `#4f39f6` | `#432dd7` | `#372aac` | `#312c85` | `#1e1a4d` | `#615fff` |
| jade | `#eefdf5` | `#d6fbe6` | `#aff6cf` | `#6dedaf` | `#03da82` | `#00c367` | `#00a052` | `#007e46` | `#01633b` | `#075233` | `#022d1c` | `#00c367` |
| lime | `#f7fee7` | `#ecfcca` | `#d8f999` | `#bbf451` | `#9ae600` | `#7ccf00` | `#5ea500` | `#497d00` | `#3c6300` | `#35530e` | `#192e03` | `#7ccf00` |
| neutral | `#fafafa` | `#f5f5f5` | `#e5e5e5` | `#d4d4d4` | `#a1a1a1` | `#737373` | `#525252` | `#404040` | `#262626` | `#171717` | `#0a0a0a` | `#737373` |
| orange | `#fff7ed` | `#ffedd4` | `#ffd6a7` | `#ffb86a` | `#ff8904` | `#ff6900` | `#f54900` | `#ca3500` | `#9f2d00` | `#7e2a0c` | `#441306` | `#ff6900` |
| pink | `#fdf2f8` | `#fce7f3` | `#fccee8` | `#fda5d5` | `#fb64b6` | `#f6339a` | `#e60076` | `#c6005c` | `#a3004c` | `#861043` | `#510424` | `#f6339a` |
| purple | `#faf5ff` | `#f3e8ff` | `#e9d4ff` | `#dab2ff` | `#c27aff` | `#ad46ff` | `#9810fa` | `#8200db` | `#6e11b0` | `#59168b` | `#3c0366` | `#ad46ff` |
| red | `#fef2f2` | `#ffe2e2` | `#ffc9c9` | `#ffa2a2` | `#ff6467` | `#fb2c36` | `#e7000b` | `#c10007` | `#9f0712` | `#82181a` | `#460809` | `#fb2c36` |
| rose | `#fff1f2` | `#ffe4e6` | `#ffccd3` | `#ffa1ad` | `#ff637e` | `#ff2056` | `#ec003f` | `#c70036` | `#a50036` | `#8b0836` | `#4d0218` | `#ff2056` |
| sky | `#f0f9ff` | `#dff2fe` | `#b8e6fe` | `#74d4ff` | `#00bcff` | `#00a6f4` | `#0084d1` | `#0069a8` | `#00598a` | `#024a70` | `#052f4a` | `#00a6f4` |
| slate | `#f8fafc` | `#f0f4fa` | `#e0e7f2` | `#c8d4e5` | `#8e9fbc` | `#607291` | `#43536f` | `#2f3f5b` | `#1c2840` | `#0e162d` | `#020619` | `#607291` |
| spring | `#f4feee` | `#e4fcd9` | `#c9f9b4` | `#9bf37d` | `#50e339` | `#3ecc28` | `#2fa61f` | `#25801b` | `#1f6518` | `#21541d` | `#0e2e0c` | `#3ecc28` |
| stone | `#fbfaf8` | `#f6f5f3` | `#e9e5e2` | `#d8d3cf` | `#a89f98` | `#7c7068` | `#5a524a` | `#473f38` | `#2b2522` | `#1e1916` | `#0d0a08` | `#7c7068` |
| teal | `#f0fdfa` | `#cbfbf1` | `#96f7e4` | `#46ecd5` | `#00d5be` | `#00bba7` | `#009689` | `#00786f` | `#005f5a` | `#0b4f4a` | `#022f2e` | `#00bba7` |
| vermilion | `#fff5ef` | `#ffe8da` | `#ffd0b6` | `#ffae83` | `#ff7831` | `#fd4e18` | `#ef2805` | `#c61d03` | `#9f1c08` | `#802212` | `#450e07` | `#fd4e18` |
| violet | `#f5f3ff` | `#ede9fe` | `#ddd6ff` | `#c4b4ff` | `#a684ff` | `#8e51ff` | `#7f22fe` | `#7008e7` | `#5d0ec0` | `#4d179a` | `#2f0d68` | `#8e51ff` |
| yellow | `#fefce8` | `#fef9c2` | `#fff085` | `#ffdf20` | `#fdc700` | `#f0b100` | `#d08700` | `#a65f00` | `#894b00` | `#733e0a` | `#432004` | `#f0b100` |
| zinc | `#fafafa` | `#f4f4f6` | `#e4e3e9` | `#d5d3da` | `#a09eab` | `#72707d` | `#53515e` | `#403e48` | `#28262c` | `#18181c` | `#09090b` | `#72707d` |

The palette also defines `--i-color-white` (`#fff`) and `--i-color-black` (`#000`).

### Variables set per element

#### Variant colors

Every color class sets two variables on its element. Buttons, links and other elements build all their colors from them:

| Variable | Default | Meaning |
|---|---|---|
| `--i-variant` | `var(--i-color-base)` | same |
| `--i-variant-inverse` | `var(--i-color-paper)` | same |

The defaults live in `variables/themes/styles.css`. Set the two variables to give any button or link a custom color. It works with every mode and state:

```html
<button style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Custom</button>
<button class="outlined" style="--i-variant: #7c3aed">Custom outlined</button>
<a href="#" style="--i-variant: #7c3aed">Custom link</a>
```

#### Private variables

Buttons, links, form controls and a few components keep their state colors in variables that start with `--_`, such as `--_background` or `--_border`. They are internal, not part of the API, and can change between versions. Override the `--i-` variables instead.

### Notes for maintainers

These 2 variables are defined but no Iris rule uses them yet. They complete the radius scale, are safe to override, and have no effect on their own:

`--i-border-radius-medium`, `--i-border-radius-large`