---
url: /api/css/list.item.md
---
# CSS: list.item

`.instui-list` — A list item (InstUI `List.Item`).

The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/list.item.css";
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-delimiter-dashed` | Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items. |
| `.-delimiter-solid` | Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items. |
| `.-ordered` | Ordered-list numbering. @affects list.item — Adds marker weight and indentation. |
| `.-size-large` | Long-form alias of `-size-lg`. |
| `.-size-medium` | Long-form alias of `-size-md`. |
| `.-size-small` | Long-form alias of `-size-sm`. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::marker` | Renders the list bullet or ordered-list number. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-list-item-color` | `<color>` | `light-dark(#273540, #ffffff)` |
| `--instui-component-list-item-delimiter-dashed-border-color` | `<color>` | `light-dark(#E8EAEC, #2D3D49)` |
| `--instui-component-list-item-delimiter-dashed-border-style` | — | `dashed` |
| `--instui-component-list-item-delimiter-dashed-border-width` | `<length>` | `0.0625rem` |
| `--instui-component-list-item-delimiter-solid-border-color` | `<color>` | `light-dark(#E8EAEC, #2D3D49)` |
| `--instui-component-list-item-delimiter-solid-border-style` | — | `solid` |
| `--instui-component-list-item-delimiter-solid-border-width` | `<length>` | `0.0625rem` |
| `--instui-component-list-item-font-family` | `[ <font-family-name> \| <generic-font-family> ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` |
| `--instui-component-list-item-font-size-large` | `<length>` | `1.25rem` |
| `--instui-component-list-item-font-size-medium` | `<length>` | `1rem` |
| `--instui-component-list-item-font-size-small` | `<length>` | `0.875rem` |
| `--instui-component-list-item-font-weight` | `<integer>` | `400` |
| `--instui-component-list-item-line-height` | `<percentage>` | `150%` |
| `--instui-component-list-item-spacing-medium` | `<length>` | `1.5rem` |
| `--instui-component-list-ordered-number-font-weight` | `<integer>` | `600` |
| `--instui-component-list-ordered-number-margin` | `<length>` | `0.5rem` |