Components

List

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Trailing supporting text

100+
Trailing keyboard command

CTRL+Shift+X
Headline with start icon
Headline with start icon

Supporting text that truly is quite long enough to fill up multiple lines.
Inset class

Makes the text line up nicely
Link list item
OP

Headline
Headline

Supporting text
Link with start icon
End icon button
Checkbox
Radio 1
Radio 2
Switch 1

Vue

<script setup lang="ts">
import { List } from "opui-css/vue"
import ListAll from "../ListAll.vue"
</script>

<template>
  <List>
    <ListAll prefix="default-" />
  </List>
</template>

Output

<ul class="ui-list">
  <!--[--><!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Trailing supporting text</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>100+</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Trailing keyboard command</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div><kbd>CTRL+Shift+X</kbd></div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="ui-border-top">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-inset">
    <!--[--><!---->
    <div class="ui-text">
      <p>Inset class</p>
      <p>Makes the text line up nicely</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-text"><p>Button list item</p></div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-text"><p>Link list item</p></div></a
    ><!--]--><!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[-->
    <div class="ui-start">
      <!--[-->
      <div class="ui-avatar"><!--[-->OP<!--]--></div>
      <!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[-->
      <div class="ui-avatar">
        <!--[--><img
          src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt
        /><!--]-->
      </div>
      <!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            d="M21.75 3A3.25 3.25 0 0 1 25 6.25v15.5A3.25 3.25 0 0 1 21.75 25H6.25A3.25 3.25 0 0 1 3 21.75V6.25A3.25 3.25 0 0 1 6.25 3zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25V15h6a.75.75 0 0 1 .743.648l.007.102a2.75 2.75 0 1 0 5.5 0a.75.75 0 0 1 .648-.743L17.5 15h6V6.25a1.75 1.75 0 0 0-1.75-1.75"
          ></path>
        </svg>
      </div>
      <div class="ui-text"><p>Button with start icon</p></div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 24 24"
        >
          <path
            fill="currentColor"
            d="m13.94 5l5.061 5.06L9.063 20a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999zm-7.414 6l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5zm14.352-8.174l.153.144l.145.153a3.58 3.58 0 0 1-.145 4.908l-.97.969L15 3.94l.97-.97a3.58 3.58 0 0 1 4.908-.144M10.526 7l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5zm4-4l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5z"
          ></path>
        </svg>
      </div>
      <div class="ui-text"><p>Link with start icon</p></div></a
    ><!--]--><!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-text"><p>End icon</p></div>
      <div class="ui-end">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M11.116 26.634a1.25 1.25 0 0 1 0-1.768L19.982 16l-8.866-8.866a1.25 1.25 0 0 1 1.768-1.768l9.75 9.75a1.25 1.25 0 0 1 0 1.768l-9.75 9.75a1.25 1.25 0 0 1-1.768 0"
          ></path>
        </svg>
      </div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>End icon button</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>
        <button class="ui-icon-button">
          <span class="ui-sr-only">More</span
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 32 32"
          >
            <path
              fill="currentColor"
              d="M16 9.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5m0 9a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M13.5 25a2.5 2.5 0 1 0 5 0a2.5 2.5 0 0 0-5 0"
            ></path>
          </svg>
        </button>
      </div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="ui-border-top">
    <label class="ui-checkbox" for="default-checkbox-all"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Checkbox</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input type="checkbox" id="default-checkbox-all" /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="ui-border-top">
    <label class="ui-radio" for="default-radio-all-1"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Radio 1</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="radio"
          id="default-radio-all-1"
          name="default-radio-group-all"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="">
    <label class="ui-radio" for="default-radio-all-2"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Radio 2</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="radio"
          id="default-radio-all-2"
          name="default-radio-group-all"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="ui-border-top">
    <label class="ui-switch" for="default-switch-all-1"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Switch 1</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="checkbox"
          role="switch"
          id="default-switch-all-1"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <!--]--><!--]-->
</ul>

Configurations

A List item is split up in three parts:

text slot: main content
start slot (optional): items before the main content
end slot (optional): items after the main content

With great power...

The List component is extremely flexible and versatile. Be careful if you start creating new configurations on your own. Maybe an existing one can solve your problem, but in another way?

Variants

Change background color with the variant prop.

Filled as default?!

Yeah it's a bit weird, but normally you would use a list in a popover/select scenario that needs to contrast against the background. If nothing else, just change it yourself.

Filled (default)
Second item

Default
Second item

Tonal
Second item

Transparent
Second item

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <div class="column" style="gap: var(--size-4)">
    <List>
      <ListItem headline="Filled (default)" />
      <ListItem headline="Second item" />
    </List>

    <List variant="default">
      <ListItem headline="Default" />
      <ListItem headline="Second item" />
    </List>

    <List variant="tonal">
      <ListItem headline="Tonal" />
      <ListItem headline="Second item" />
    </List>

    <List variant="transparent">
      <ListItem headline="Transparent" />
      <ListItem headline="Second item" />
    </List>
  </div>
</template>

Output

<div class="column" style="gap: var(--size-4)">
  <ul class="ui-list">
    <!--[-->
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Filled (default)</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Second item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <!--]-->
  </ul>
  <ul class="ui-list ui-default">
    <!--[-->
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Default</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Second item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <!--]-->
  </ul>
  <ul class="ui-list ui-tonal">
    <!--[-->
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Tonal</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Second item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <!--]-->
  </ul>
  <ul class="ui-list ui-transparent">
    <!--[-->
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Transparent</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <li class="">
      <!--[--><!---->
      <div class="ui-text">
        <p>Second item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----><!--]-->
    </li>
    <!--]-->
  </ul>
</div>

Clickable list item

Wrap the elements of your List item with a a, buttonor label depending on use-case.

Link list item
Checkbox list item

Vue

<script setup lang="ts">
import { CheckboxInput, List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem as="button" type="button" headline="Button list item" />
    <ListItem as="a" href="#clickable-list-item" headline="Link list item" />
    <ListItem type="checkbox" for="clickable-checkbox">
      <template #text><div>Checkbox list item</div></template>
      <template #end
        ><CheckboxInput id="clickable-checkbox" name="checkbox"
      /></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <button>
      <!---->
      <div class="ui-text">
        <p>Button list item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!---->
    </button>
  </li>
  <li class="">
    <a
      ><!---->
      <div class="ui-text">
        <p>Link list item</p>
        <!----><!--[--><!--]--><!--[--><!--]-->
      </div>
      <!----></a
    >
  </li>
  <li class="">
    <label class="ui-checkbox" for="clickable-checkbox"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Checkbox list item</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="checkbox"
          id="clickable-checkbox"
          name="checkbox"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <!--]-->
</ul>

Selected item

Add aria-selected="true" to the ListItem.

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem aria-selected="true">
      <a href="#">
        <div class="ui-text">
          <p>Selected item</p>
          <p>This item has aria-selected="true" applied to the ListItem</p>
        </div>
      </a>
    </ListItem>
    <ListItem>
      <a href="#">
        <div class="ui-text">
          <p>Normal item</p>
        </div>
      </a>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="" aria-selected="true">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-text">
        <p>Selected item</p>
        <p>This item has aria-selected="true" applied to the ListItem</p>
      </div></a
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-text"><p>Normal item</p></div></a
    ><!--]--><!----><!--]-->
  </li>
  <!--]-->
</ul>

Text

Main text lives in the text slot, or pass headlineand description props directly on ListItem.

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Headline

Supporting text

Even more supporting text

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Headline" />
    <ListItem
      headline="Headline"
      description="Supporting text that truly is quite long enough to fill up multiple lines."
    />
    <ListItem headline="Headline">
      <p>Supporting text</p>
      <p>Even more supporting text</p>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[-->
      <p>Supporting text</p>
      <p>Even more supporting text</p>
      <!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

Start items

Authored via the start slot on ListItem.

Icon

Headline
Headline

Supporting text

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Headline">
      <template #start
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
          ></path></svg
      ></template>
    </ListItem>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
          ></path></svg
      ></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

Avatar

Image

Headline

Supporting text
Headline

Supporting text

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><img
          src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
      /></template>
    </ListItem>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><img
          src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
      /></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><img
        src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt=""
      /><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><img
        src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt=""
      /><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

Video

Headline

Supporting text

13:37
Headline

Supporting text

90s

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><video controls muted>
          <source
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4"
          /></video
      ></template>
      <template #end><div>13:37</div></template>
    </ListItem>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><video controls muted>
          <source
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4"
          /></video
      ></template>
      <template #end><div>90s</div></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><video controls muted>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        /></video
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>13:37</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><video controls muted>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        /></video
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>90s</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <!--]-->
</ul>

End items

Authored via the end slot on ListItem.

Text

Headline

30kB
Headline

Supporting text

99%
Headline

100+

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Headline">
      <template #end><div>30kB</div></template>
    </ListItem>
    <ListItem headline="Headline" description="Supporting text">
      <template #end><div>99%</div></template>
    </ListItem>
    <ListItem headline="Headline">
      <template #description
        ><p>
          Supporting text that truly is quite long enough to fill up multiple
          lines.
        </p></template
      >
      <template #end><div>100+</div></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>30kB</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>99%</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>100+</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <!--]-->
</ul>

Keyboard command

Save all

CTRL+ALT+DEL
Save

CTRL+S

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="Save all">
      <template #end
        ><div><kbd>CTRL+ALT+DEL</kbd></div></template
      >
    </ListItem>
    <ListItem headline="Save">
      <template #end
        ><div><kbd>CTRL+S</kbd></div></template
      >
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Save all</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div><kbd>CTRL+ALT+DEL</kbd></div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Save</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div><kbd>CTRL+S</kbd></div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <!--]-->
</ul>

Checkbox

Wrap the List item content with a <label class="ui-checkbox" for="INPUTID">to make the entire surface clickable.

Radio

Wrap the List item content with a <label class="ui-radio" for="INPUTID">to make the entire surface clickable.

Radio group: Add a common name to each <input> for radio group behavior.

Switch

Inset

Enables a list item without a start icon to align with items that do.

No inset
Inset class

Makes the text line up nicely
Hidden

Inset class

Any div.start will be hidden when inset

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="No inset">
      <template #start
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
          ></path></svg
      ></template>
    </ListItem>
    <ListItem inset headline="Inset class">
      <p>Makes the text line up nicely</p>
    </ListItem>
    <ListItem inset headline="Inset class">
      <template #start><div>Hidden</div></template>
      <p>Any <code>div.start</code> will be hidden when inset</p>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>No inset</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-inset">
    <!--[--><!---->
    <div class="ui-text">
      <p>Inset class</p>
      <!----><!--[--><!--]--><!--[-->
      <p>Makes the text line up nicely</p>
      <!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-inset">
    <!--[-->
    <div class="ui-start">
      <!--[-->
      <div>Hidden</div>
      <!--]-->
    </div>
    <div class="ui-text">
      <p>Inset class</p>
      <!----><!--[--><!--]--><!--[-->
      <p>Any <code>div.start</code> will be hidden when inset</p>
      <!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

Gutterless

Apply the .ui-gutterless class on the ul.ui-list element to remove the inline padding on the list items.

Gutterless list item
Headline

Supporting text

100+

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List gutterless>
    <ListItem headline="Gutterless list item">
      <template #end
        ><div>
          <button class="ui-icon-button" type="button">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="32"
              height="32"
              viewBox="0 0 32 32"
            >
              <path
                fill="currentColor"
                d="M12 12h2v12h-2zm6 0h2v12h-2zM6 28h20V10H6zm16-22V4H10v2H4v2h24V6zM12 4h8v2h-8z"
              ></path>
            </svg>
          </button></div
      ></template>
    </ListItem>
    <ListItem headline="Headline" description="Supporting text">
      <template #start
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
          ></path></svg
      ></template>
      <template #end><div>100+</div></template>
    </ListItem>
  </List>
</template>

Output

<ul class="ui-list ui-gutterless">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Gutterless list item</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>
        <button class="ui-icon-button" type="button">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 32 32"
          >
            <path
              fill="currentColor"
              d="M12 12h2v12h-2zm6 0h2v12h-2zM6 28h20V10H6zm16-22V4H10v2H4v2h24V6zM12 4h8v2h-8z"
            ></path>
          </svg>
        </button>
      </div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>100+</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <!--]-->
</ul>

Borders

On every item

Apply the .ui-bordered class on the ul.ui-list element to give all list items a border.

So
Many
Borders

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List bordered>
    <ListItem headline="So" />
    <ListItem headline="Many" />
    <ListItem headline="Borders" />
  </List>
</template>

Output

<ul class="ui-list ui-bordered">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>So</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Many</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Borders</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

On one item

Apply the .ui-border-top class on a li item to give it an upper border.

I need borders
Help
Thanks

Vue

<script setup lang="ts">
import { List, ListItem } from "opui-css/vue"
</script>

<template>
  <List>
    <ListItem headline="I need borders" />
    <ListItem headline="Help" />
    <ListItem borderTop headline="Thanks" />
  </List>
</template>

Output

<ul class="ui-list">
  <!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>I need borders</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Help</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!---->
    <div class="ui-text">
      <p>Thanks</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <!--]-->
</ul>

Dense

Just add the dense prop to the List!

dense

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Trailing supporting text

100+
Trailing keyboard command

CTRL+Shift+X
Headline with start icon
Headline with start icon

Supporting text that truly is quite long enough to fill up multiple lines.
Inset class

Makes the text line up nicely
Link list item
OP

Headline
Headline

Supporting text
Link with start icon
End icon button
Checkbox
Radio 1
Radio 2
Switch 1

Vue

<script setup lang="ts">
import { List } from "opui-css/vue"
import ListAll from "./ListAll.vue"
</script>

<template>
  <List dense class="list-dense-target">
    <ListAll prefix="dense-" />
  </List>
</template>

Output

<ul class="ui-list ui-dense list-dense-target">
  <!--[--><!--[-->
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Trailing supporting text</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>100+</div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>Trailing keyboard command</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div><kbd>CTRL+Shift+X</kbd></div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="ui-border-top">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[--><svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path></svg
      ><!--]-->
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-inset">
    <!--[--><!---->
    <div class="ui-text">
      <p>Inset class</p>
      <p>Makes the text line up nicely</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-text"><p>Button list item</p></div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-text"><p>Link list item</p></div></a
    ><!--]--><!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[-->
    <div class="ui-start">
      <!--[-->
      <div class="ui-avatar"><!--[-->OP<!--]--></div>
      <!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="">
    <!--[-->
    <div class="ui-start">
      <!--[-->
      <div class="ui-avatar">
        <!--[--><img
          src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt
        /><!--]-->
      </div>
      <!--]-->
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <!--[--><!--]--><!--[--><!--]-->
    </div>
    <!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            d="M21.75 3A3.25 3.25 0 0 1 25 6.25v15.5A3.25 3.25 0 0 1 21.75 25H6.25A3.25 3.25 0 0 1 3 21.75V6.25A3.25 3.25 0 0 1 6.25 3zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25V15h6a.75.75 0 0 1 .743.648l.007.102a2.75 2.75 0 1 0 5.5 0a.75.75 0 0 1 .648-.743L17.5 15h6V6.25a1.75 1.75 0 0 0-1.75-1.75"
          ></path>
        </svg>
      </div>
      <div class="ui-text"><p>Button with start icon</p></div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!----><!--[--><a href="#"
      ><div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 24 24"
        >
          <path
            fill="currentColor"
            d="m13.94 5l5.061 5.06L9.063 20a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999zm-7.414 6l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5zm14.352-8.174l.153.144l.145.153a3.58 3.58 0 0 1-.145 4.908l-.97.969L15 3.94l.97-.97a3.58 3.58 0 0 1 4.908-.144M10.526 7l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5zm4-4l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5z"
          ></path>
        </svg>
      </div>
      <div class="ui-text"><p>Link with start icon</p></div></a
    ><!--]--><!----><!--]-->
  </li>
  <li class="ui-border-top">
    <!--[--><!----><!--[--><button>
      <div class="ui-text"><p>End icon</p></div>
      <div class="ui-end">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M11.116 26.634a1.25 1.25 0 0 1 0-1.768L19.982 16l-8.866-8.866a1.25 1.25 0 0 1 1.768-1.768l9.75 9.75a1.25 1.25 0 0 1 0 1.768l-9.75 9.75a1.25 1.25 0 0 1-1.768 0"
          ></path>
        </svg>
      </div></button
    ><!--]--><!----><!--]-->
  </li>
  <li class="">
    <!--[--><!---->
    <div class="ui-text">
      <p>End icon button</p>
      <!----><!--[--><!--]--><!--[--><!--]-->
    </div>
    <div class="ui-end">
      <!--[-->
      <div>
        <button class="ui-icon-button">
          <span class="ui-sr-only">More</span
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 32 32"
          >
            <path
              fill="currentColor"
              d="M16 9.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5m0 9a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M13.5 25a2.5 2.5 0 1 0 5 0a2.5 2.5 0 0 0-5 0"
            ></path>
          </svg>
        </button>
      </div>
      <!--]-->
    </div>
    <!--]-->
  </li>
  <li class="ui-border-top">
    <label class="ui-checkbox" for="dense-checkbox-all"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Checkbox</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input type="checkbox" id="dense-checkbox-all" /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="ui-border-top">
    <label class="ui-radio" for="dense-radio-all-1"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Radio 1</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="radio"
          id="dense-radio-all-1"
          name="dense-radio-group-all"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="">
    <label class="ui-radio" for="dense-radio-all-2"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Radio 2</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="radio"
          id="dense-radio-all-2"
          name="dense-radio-group-all"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <li class="ui-border-top">
    <label class="ui-switch" for="dense-switch-all-1"
      ><!---->
      <div class="ui-text">
        <!----><!----><!--[-->
        <div>Switch 1</div>
        <!--]-->
      </div>
      <div class="ui-end">
        <!--[--><input
          type="checkbox"
          role="switch"
          id="dense-switch-all-1"
        /><!--]-->
      </div>
      <!--[--><!--]--></label
    >
  </li>
  <!--]--><!--]-->
</ul>

Anatomy

Container: ul.ui-list
List item: li
Content wrapper (optional): a, button, label
Start content (optional): .ui-start > svg, img, video
Text content: .ui-text > p, p + p
End content (optional): .ui-end > svg, p, button, a, input

Headline

Supporting text

100+

API

List

Prop	Type	Default	Description
`bordered`	`boolean`	`false`	Adds a border between list items.
`dense`	`boolean`	`false`	Packs the list tighter.
`gutterless`	`boolean`	`false`	Removes list inline padding.
`variant`	`"default" \| "tonal" \| "transparent"`	-	The background color variant of the list.

List item

Prop	Type	Default	Description
`as`	`string`	-	Renders an inner element of the given tag (e.g. `"a"`, `"button"`). All extra props are forwarded to it, so any HTML attribute is supported without enumeration.
`borderTop`	`boolean`	`false`	List item top border.
`headline`	`string`	-	The main text for the list item.
`inset`	`boolean`	`false`	Aligns with items that have a start icon.
`supportingText`	`string`	-	Extra text displayed below the headline.

Browser support

See also the full browser support guide.

Installation

list.css

@layer components.extended {
  /*
Lists meant to be used stand-alone or as part of Select elements

  Intended use-case:
  - ul.ui-list > li
  - .ui-select > .ui-list > option
*/
  :where(.ui-list) {
    --_bg-color: var(--surface-filled);
    --_bg-color-hover: oklch(from var(--primary) l c h / 15%);

    background-color: var(--_bg-color);
    color: var(--text-primary);
    list-style: none;
    padding: var(--size-2) 0;

    @media (pointer: coarse) {
      &,
      * {
        user-select: none;
      }
    }

    /* Background color */
    &.ui-transparent {
      --_bg-color: transparent;
    }

    &.ui-default {
      --_bg-color: var(--surface-default);
    }

    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
    }

    /* Borders on all list items */
    &.ui-bordered {
      :where(li + li, option + option) {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
          visibility: visible;
          /* override select > option:before style */
        }
      }
    }

    /* Dense - less gaps and spacing */
    &.ui-dense {
      :where(li, option) {
        gap: var(--size-2);
        min-block-size: var(--size-7);
        padding: var(--size-1) var(--size-2);

        &.ui-border-top {
          margin-block-start: var(--size-2);

          &::before {
            inset: calc(-1 * var(--size-1)) 0 auto 0;
          }
        }

        /* Clickable list item */
        &:has(> a, > button, > label) {
          min-block-size: auto;
          padding: 0;
        }

        & > :where(a, button, label) {
          gap: var(--size-2);
          min-block-size: var(--size-7);
          padding: var(--size-1) var(--size-2);
        }

        /* Checkbox / Radio */
        & > label {
          .ui-end {
            padding-inline-end: 0.125rem;
          }

          &:where(.ui-checkbox, .ui-radio) {
            --_input-size: var(--size-3);
          }
        }

        /* Leading and trailing content */
        .ui-start,
        .ui-end {
          .ui-avatar {
            max-inline-size: var(--size-6);
          }

          .ui-icon-button,
          svg {
            max-inline-size: var(--size-4);
          }

          .ui-checkbox,
          .ui-radio {
            --_input-size: var(--size-3);
          }
        }
      }
    }

    /* Gutterless */
    &.ui-gutterless {
      :where(li, option) {
        padding-inline: 0;

        & > :where(a, button, label) {
          padding-inline: 0;
        }
      }
    }

    /* List item */
    :where(li, option, [role="group"] > label) {
      align-items: center;
      background-color: var(--_bg-color);
      display: flex;
      font-size: var(--font-size-05);
      gap: var(--size-3);
      isolation: isolate;
      min-block-size: 40px;
      padding: var(--size-2) var(--size-3);
      position: relative;

      &::before {
        display: none;
        /* removing checkmark from option */
      }

      * {
        font-size: inherit;
      }

      /* Clickable list item */
      &:has(> a, > button, > label) {
        background: transparent;
        display: block;
        min-block-size: auto;
        padding: 0;

        &[aria-selected="true"] > :where(a, button, label),
        &[aria-selected="true"],
        &:has(> [aria-current="page"]) > :where(a, button, label) {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Select option */
      &:where(option) {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        &:hover {
          background-color: var(--_bg-color-hover);
        }

        &[aria-selected="true"] {
          background-color: var(--_bg-color-hover);
          color: var(--primary);
        }

        &:checked {
          background-color: oklch(from var(--primary) l c h / 30%);
        }
      }

      & > a,
      & > button,
      & > label {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        outline-offset: -3px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        &:hover {
          background-color: var(--_bg-color-hover);
        }

        &[aria-selected="true"],
        &[aria-current="page"] {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Checkbox / Radio / Switch */
      & > label {
        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
          display: flex;
        }

        .ui-end {
          padding-inline-end: var(--size-1);
        }

        &:where(.ui-checkbox, .ui-radio) {
          inline-size: 100%;
        }

        /* Switches look comically big in lists, so it's better to use a smaller variant  */
        &.ui-switch {
          --_dot-size: 0.75rem;
          --_track-height: var(--size-4);
          --_track-width: 2.5rem;
        }
      }

      /* Video */
      &:has(video) {
        padding: 0.75rem var(--size-3) 0.75rem 0;
      }

      /* Border between list items */
      &.ui-border-top {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
        }
      }

      /* Text */
      .ui-text {
        flex: 1;
        line-height: 1.6;

        :where(h1, h2, h3, h4, h5, h6, p, span) {
          color: inherit;
          font-weight: 400;
        }

        p + p {
          color: var(--text-muted);
          font-size: var(--font-size-0);
        }
      }

      /* Leading content */
      .ui-start {
        align-items: center;
        align-self: center;
        display: grid;
        z-index: 1;

        &:has(svg) {
          max-inline-size: var(--size-5);
        }

        svg {
          padding-block-start: 0.125rem;
        }

        img {
          aspect-ratio: 1;
          inline-size: 56px;
          object-fit: cover;
        }

        video {
          aspect-ratio: 16/9;
          block-size: 64px;
          object-fit: cover;
        }
      }

      /* Trailing content */
      .ui-end {
        align-items: center;
        display: flex;
        font-size: var(--font-size-0);
        text-align: end;
        z-index: 1;

        &:not(:has(a, button, input)) {
          pointer-events: none;
        }

        kbd {
          background-color: transparent;
          border: 0;
          color: inherit;
          opacity: 0.6;
        }

        svg {
          inline-size: 100%;
          max-inline-size: var(--size-5);
        }
      }

      /* Inset */
      &.ui-inset {
        .ui-text {
          padding-inline-start: calc(var(--size-5) + var(--size-3));
        }

        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
        .ui-start {
          display: none;
        }
      }
    }
  }
}