---
title: 'List'
description: 'List is a layout component for displaying rows of content, with optional start/center/end slots and a navigable item variant.'
version: 11.0.0
generatedAt: 2026-04-21T13:57:51.557Z
checksum: 37226afbd1e750d15c52eaf0d641a09a1e6f1d78121deaee0bc9306cf6843090
---

# List

## Import

```tsx
import { List } from '@dnb/eufemia'
```

## Description

`List` is a layout component for displaying rows of content. Use `List.Container` as the wrapper and `List.Item.Basic`, `List.Item.Action`, or `List.Item.Accordion` for each row.

- **List.Container** – Provides list context (e.g. variant) and wraps items in a vertical flex layout. Pass `separated` to insert gap between rows so each item gets its own rounding/outline instead of sharing borders.
- **List.Item.Basic** – A single row with optional `icon` and `title` props and cell children. Supports selected state, variant override, and loading states via `pending` (skeleton overlay) or `skeleton` (text placeholder).
- **List.Item.Action** – Clickable row with optional `icon` and `title` props (Enter/Space support) and a chevron icon. Use `chevronPosition="left"` or `"right"` (default) to place the chevron. Supports `pending` to show a loading overlay and disable interaction. Use `href` for navigation.
- **List.Item.Accordion** – Expandable row with optional `icon` and `title` props and `List.Item.Accordion.Content` for the expandable section. Use `open` for initial state, `chevronPosition="left"` or `"right"` (default) for chevron placement, and optional `id` for ARIA. Supports `pending` to disable toggling.
- **List.Cell.Start**, **List.Cell.Center**, **List.Cell.End**, **List.Cell.Footer** – Cell slots inside Basic/Action/Accordion for start, middle, end, and additional content.
- **List.Cell.Title** – Title block that can contain `List.Cell.Title.Overline` and `List.Cell.Title.Subline`. Use the nested helpers for structured header text, even though the drop-in `List.Cell.Title.Overline`/`List.Cell.Title.Subline` components still exist for backward compatibility.

All item components support [Space](/uilib/layout/space/properties) props (`top`, `bottom`, etc.) and forward standard HTML attributes.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=47195-2954)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/list)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/list)

## Basic usage

```jsx
import { List } from '@dnb/eufemia'

render(
  <List.Container>
    <List.Item.Basic>Simple row</List.Item.Basic>

    <List.Item.Basic title="Title" icon="bell">
      <List.Cell.Start>Start</List.Cell.Start>
      <List.Cell.Center>Center</List.Cell.Center>
      <List.Cell.End>End</List.Cell.End>
    </List.Item.Basic>

    <List.Item.Basic>
      <List.Cell.Center>
        <List.Cell.Title>
          <List.Cell.Title.Overline>Overline</List.Cell.Title.Overline>
          Main title here
          <List.Cell.Title.Subline>Subline</List.Cell.Title.Subline>
        </List.Cell.Title>
      </List.Cell.Center>
    </List.Item.Basic>

    <List.Item.Action
      title="Click me"
      icon="bell"
      onClick={() => console.log('Clicked')}
    >
      <List.Cell.End>Value</List.Cell.End>
    </List.Item.Action>

    <List.Item.Action
      title="Link"
      icon="bell"
      href="https://dnb.no"
      target="_blank"
      rel="noopener noreferrer"
    >
      <List.Cell.End>Value</List.Cell.End>
    </List.Item.Action>

    <List.Item.Accordion title="Expandable" icon="bell">
      <List.Item.Accordion.Header>
        <List.Cell.End>1234</List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content>
        <P>Content when expanded.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>

    <List.Item.Accordion title="Without explicit header" icon="bell">
      <List.Item.Accordion.Content>
        <P>Content when expanded.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

## Loading states

- **pending** – On `List.Item.Basic` or `List.Item.Action`: shows a skeleton overlay and disables pointer events. On `List.Item.Action`, click and keyboard are disabled (`tabIndex={-1}`, `aria-disabled`). Use while data is loading.
- **skeleton** – On `List.Item.Basic` or `List.Item.Action`: applies skeleton font styling (text placeholder) without the full overlay. Use for a lighter loading indication.

## Accessibility

- **List.Item.Action** uses `role="button"` so assistive technologies announce it as a button. It is focusable (`tabIndex={0}`) and activates on Enter and Space. When `pending` is true, it is not focusable and has `aria-disabled="true"`. You can override the role via the `role` prop (e.g. `role="link"`).
- **List.Item.Accordion** exposes full ARIA for expand/collapse: the header has `id`, `aria-controls`, and `aria-expanded`; the content region has `id`, `aria-labelledby`, `aria-hidden`, and `aria-expanded`. Pass an `id` prop for stable references, or leave it unset for an auto-generated id. When `pending` is true, the header is not focusable and has `aria-disabled="true"`.
- Use `aria-label` or other ARIA attributes on the container or items when needed for screen readers.

## Demos

### Rows with cells like Start, Center, End, Title

This example demonstrates different cell layouts and their placement.

```tsx
render(
  <List.Container>
    <List.Item.Basic>
      <List.Cell.Start>Start</List.Cell.Start>
      <List.Cell.Center>Center</List.Cell.Center>
      <List.Cell.End>End</List.Cell.End>
    </List.Item.Basic>

    <List.Item.Basic title="Title" icon={fish_medium}>
      <List.Cell.End>End</List.Cell.End>
    </List.Item.Basic>

    <List.Item.Basic>
      <List.Cell.Title>
        <List.Cell.Title.Overline>Overline</List.Cell.Title.Overline>
        Title
        <List.Cell.Title.Subline variant="description">
          Subline
        </List.Cell.Title.Subline>
      </List.Cell.Title>
      <List.Cell.End>End</List.Cell.End>
      <List.Cell.Footer
        style={{
          background: 'var(--token-color-background-neutral-subtle)',
        }}
      >
        <P>Footer</P>
      </List.Cell.Footer>
    </List.Item.Basic>
  </List.Container>
)
```

### Navigable item

```tsx
render(
  <List.Container>
    <List.Item.Action
      icon={fish_medium}
      title="Navigate to details"
      onClick={() => console.log('Clicked')}
    >
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Action
      chevronPosition="left"
      title="Left aligned chevron"
      onClick={() => console.log('Clicked')}
    >
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)
```

### Navigable item with href

Use the `href` property on `List.Item.Action` to render a native link. Use `target` and `rel` for external links (e.g. `target="_blank"` with `rel="noopener noreferrer"`).

```tsx
render(
  <List.Container>
    <List.Item.Action
      icon={fish_medium}
      title="Link to details"
      href="#details"
    >
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Action
      icon={fish_medium}
      title="External link (opens in new tab)"
      href="https://eufemia.dnb.no/"
      target="_blank"
      rel="noopener noreferrer"
    >
      <List.Cell.End>
        <NumberFormat.Currency value={5678} />
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)
```

### With anchor

List items containing [Anchor](/uilib/components/anchor) links.

```tsx
render(
  <List.Container>
    <List.Item.Basic title={<Anchor href="#">Link to page one</Anchor>} />

    <List.Item.Basic
      icon={fish_medium}
      title={<Anchor href="#">Link with icon and end value</Anchor>}
    >
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Basic>
  </List.Container>
)
```

### Accordion

Expandable list items using `List.Item.Accordion` with optional `icon` and `title` properties and `List.Item.Accordion.Content` for the expandable section. Use the `open` property to set the initial open state.

```tsx
render(
  <List.Container>
    <List.Item.Accordion icon={fish_medium} title="Accordion title">
      <List.Item.Accordion.Header>
        <List.Cell.End>
          <NumberFormat.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Accordion.Header>

      <List.Item.Accordion.Content innerSpace>
        <P>Accordion content goes here.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>

    <List.Item.Accordion open title="Opened by default">
      <List.Item.Accordion.Content innerSpace>
        <P>This section is open initially.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>

    <List.Item.Accordion
      chevronPosition="left"
      title="Chevron on the left"
    >
      <List.Item.Accordion.Header>
        <List.Cell.End>
          <NumberFormat.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content innerSpace>
        <P>
          Use <Code>chevronPosition="left"</Code> to place the chevron on
          the left.
        </P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

### With Badge

Use [Badge](/uilib/components/badge) in `List.Cell.End` to show status or counts.

```tsx
render(
  <List.Container>
    <List.Item.Action title="In Action Item" icon={fish_medium}>
      <List.Cell.End>
        <Badge content="Badge" />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Accordion title="In Accordion Item" icon={fish_medium}>
      <List.Item.Accordion.Header>
        <List.Cell.End>
          <Flex.Horizontal>
            <Badge
              content={3}
              label="Notifications"
              variant="notification"
            />
            <Value.Currency value={1234} />
          </Flex.Horizontal>
        </List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content innerSpace>
        <P>Accordion content goes here.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

### Footer with buttons

Use `List.Cell.Footer` to place actions such as [Button](/uilib/components/button) in the list row.

```tsx
render(
  <List.Container>
    <List.Item.Basic title="Item with actions" icon={fish_medium}>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
      <List.Cell.Footer>
        <Flex.Horizontal>
          <Button text="Save" />
          <Button variant="tertiary" text="Delete" />
        </Flex.Horizontal>
      </List.Cell.Footer>
    </List.Item.Basic>

    <List.Item.Action icon={fish_medium} title="Action item with button">
      <List.Cell.End>
        <Value.Currency value={5678} />
      </List.Cell.End>
      <List.Cell.Footer>
        <Button variant="secondary" text="Open" />
      </List.Cell.Footer>
    </List.Item.Action>

    <List.Item.Accordion chevronPosition="left" title="Accordion title">
      <List.Item.Accordion.Header>
        <List.Cell.End>
          <NumberFormat.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Cell.Footer
        style={{
          background: 'var(--token-color-background-neutral-subtle)',
        }}
      >
        <Button variant="tertiary" text="Next" icon="chevron_right" />
      </List.Cell.Footer>

      <List.Item.Accordion.Content innerSpace>
        <P>Accordion content goes here.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

### Responsive Grid Layout

Using [Grid.Container](/uilib/layout/grid/container) with [Grid.Item](/uilib/layout/grid/item) for a 12-column responsive grid.

```tsx
render(
  <Grid.Container
    rowGap
    columnGap
    style={{
      marginInline: 'auto',
      maxInlineSize: 'var(--layout-medium)',
    }}
  >
    <Grid.Item
      span={{
        small: 'full',
        medium: [1, 4],
        large: [5, 12],
      }}
    >
      <List.Container>
        <List.Item.Action icon={fish_medium} title="Navigate to details">
          <List.Cell.End>
            <NumberFormat.Currency value={1234} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Navigate to details">
          <List.Cell.End>
            <NumberFormat.Currency value={1234} />
          </List.Cell.End>
        </List.Item.Action>
      </List.Container>
    </Grid.Item>

    <Grid.Item
      span={{
        small: 'full',
        medium: [5, 6],
        large: [1, 4],
      }}
      style={{
        display: 'gid',
        placeContent: 'center',
        textAlign: 'center',
        background: 'var(--token-color-background-neutral-subtle)',
      }}
    >
      <P>Second Grid Item</P>
    </Grid.Item>
  </Grid.Container>
)
```

### Separated lists

Use the `separated` property on `List.Container` to add row gap between list items.

```tsx
render(
  <List.Container separated>
    <List.Item.Basic icon={fish_medium} title="Title 1">
      <List.Cell.End>
        <Value.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Basic>

    <List.Item.Basic icon={fish_medium} title="Title 2">
      <List.Cell.End>
        <Value.Currency value={4567} />
      </List.Cell.End>
    </List.Item.Basic>
  </List.Container>
)
```

### Dynamic list

```tsx
const myList = [
  {
    name: 'List item 1',
    amount: 10000,
  },
  {
    name: 'List item 2',
    amount: 5000,
  },
  {
    name: 'List item 3',
    amount: 7500,
  },
]
render(
  <List.Container>
    {myList.map((account) => (
      <List.Item.Basic key={account.name} title={account.name}>
        <List.Cell.End>
          <Value.Currency value={account.amount} />
        </List.Cell.End>
      </List.Item.Basic>
    ))}
  </List.Container>
)
```

### With DateFormat

Use [DateFormat](/uilib/components/date-format) in `List.Cell.Start` to show dates in the list row.

```tsx
render(
  <List.Container>
    <List.Item.Basic title="In Basic Item">
      <List.Cell.Start fontSize="small">
        <DateFormat
          value={new Date('2026-02-07')}
          dateStyle="medium"
          hideCurrentYear
        />
      </List.Cell.Start>
      <List.Cell.End>
        <Value.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Basic>

    <List.Item.Action>
      <List.Cell.Title>
        <List.Cell.Title.Overline>
          <DateFormat
            value={new Date('2026-02-07')}
            dateStyle="medium"
            hideCurrentYear
          />
        </List.Cell.Title.Overline>
        In Action Item
      </List.Cell.Title>
      <List.Cell.End>
        <Value.Currency value={5678} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Accordion>
      <List.Item.Accordion.Header>
        <List.Cell.Title>
          <List.Cell.Title.Overline>
            <DateFormat
              value={new Date('2026-02-07')}
              dateStyle="medium"
              hideCurrentYear
            />
          </List.Cell.Title.Overline>
          In Accordion Item
        </List.Cell.Title>
        <List.Cell.End>
          <Value.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content innerSpace>
        <P>
          Use <Code>chevronPosition="left"</Code> to place the chevron on
          the left.
        </P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

### With Subline

Use `List.Cell.Title.Subline` to add supporting text below the title. The `variant="description"` option uses smaller text for secondary information.

```tsx
render(
  <List.Container>
    <List.Item.Action icon={fish_medium}>
      <List.Cell.Title>
        <span>Item 1</span>
        <List.Cell.Title.Subline>
          <DateFormat
            value={new Date('2026-02-07')}
            dateStyle="medium"
            hideCurrentYear
          />
        </List.Cell.Title.Subline>
      </List.Cell.Title>
      <List.Cell.End>
        <Value.Currency value={5678} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Accordion icon={fish_medium}>
      <List.Item.Accordion.Header>
        <List.Cell.Title>
          <span>Item 2</span>
          <List.Cell.Title.Subline>Detail 1</List.Cell.Title.Subline>
          <List.Cell.Title.Subline variant="description">
            Detail 2
          </List.Cell.Title.Subline>
          <List.Cell.Title.Subline>
            <Flex.Horizontal rowGap="x-small">
              <Badge status="neutral" subtle content="Detail 3" />
              <Badge status="neutral" subtle content="Detail 3" />
            </Flex.Horizontal>
          </List.Cell.Title.Subline>
        </List.Cell.Title>
        <List.Cell.End>
          <Value.Currency value={5678} />
        </List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content innerSpace>
        <P>Accordion content goes here.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>

    <List.Item.Action title="Title" icon={fish_medium}>
      <List.Cell.End>
        <Value.Currency value={5678} />
        <List.Cell.Title.Subline variant="description">
          Subline
        </List.Cell.Title.Subline>
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)
```

### With form elements

Use [Field.Selection](/uilib/extensions/forms/base-fields/Selection/) and [Field.ArraySelection](/uilib/extensions/forms/base-fields/ArraySelection/) render prop children to compose list rows and `selected` state.

Place them inside `List.Cell.Start` to align them to the left side of the list row.

```tsx
render(
  <Form.Handler
    defaultData={{
      mySelection: 'bar',
      myArraySelection: ['bar'],
      myDataPath: [
        {
          value: 'foo',
          title: 'Foo!',
          amount: 1234,
        },
        {
          value: 'bar',
          title: 'Baar!',
          amount: 5678,
        },
        {
          value: 'baz',
          title: 'Baz!',
          amount: 9999,
        },
      ],
    }}
  >
    <Flex.Stack>
      <Field.Selection
        label="Single choice"
        variant="radio"
        path="/mySelection"
        dataPath="/myDataPath"
        width="large"
      >
        {({ value: selectedValue, options = [] }) => {
          return (
            <List.Container>
              {options.map(({ value, title, amount }) => {
                return (
                  <List.Item.Basic
                    key={value}
                    selected={value === selectedValue}
                  >
                    <List.Cell.Start>
                      <Field.Option value={value} title={title} />
                    </List.Cell.Start>
                    <List.Cell.End>
                      <Value.Currency value={amount} />
                    </List.Cell.End>
                  </List.Item.Basic>
                )
              })}
            </List.Container>
          )
        }}
      </Field.Selection>

      <Field.ArraySelection
        label="Multiple choice"
        variant="checkbox"
        path="/myArraySelection"
        dataPath="/myDataPath"
        width="large"
      >
        {({ value = [], options = [] }) => {
          return (
            <List.Container>
              {options.map(({ value: optionValue, title, amount }) => {
                return (
                  <List.Item.Basic
                    key={optionValue}
                    selected={value.includes(optionValue)}
                  >
                    <List.Cell.Start>
                      <Field.Option value={optionValue} title={title} />
                    </List.Cell.Start>
                    <List.Cell.End>
                      <Value.Currency value={amount} />
                    </List.Cell.End>
                  </List.Item.Basic>
                )
              })}
            </List.Container>
          )
        }}
      </Field.ArraySelection>
    </Flex.Stack>
  </Form.Handler>
)
```

### With avatar

Use [Avatar](/uilib/components/avatar) in `List.Cell.Start` as the left content.

```tsx
render(
  <List.Container>
    <List.Item.Basic title="Alice Andersen">
      <List.Cell.Start>
        <Avatar size="medium">A</Avatar>
      </List.Cell.Start>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Basic>

    <List.Item.Action title="Bob Berg" onClick={() => {}}>
      <List.Cell.Start>
        <Avatar size="medium">B</Avatar>
      </List.Cell.Start>
      <List.Cell.End>
        <Value.Currency value={5678} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Accordion title="Carol with image">
      <List.Item.Accordion.Header>
        <List.Cell.Start>
          <Avatar size="medium">C</Avatar>
        </List.Cell.Start>
        <List.Cell.End>Value</List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content innerSpace>
        <P>Content goes here.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)
```

### Selected state

Provide the `selected` property on `List.Item.Basic` for selectable rows. When a **checkbox** or **radio** is nested inside the row, this also enables the full-row hit area behavior.

```tsx
render(
  <List.Container>
    <List.Item.Basic>Normal row</List.Item.Basic>

    <List.Item.Basic selected>Selected row</List.Item.Basic>

    <List.Item.Basic>Another normal row</List.Item.Basic>
  </List.Container>
)
```

### With custom background color

```tsx
render(
  <List.Container>
    <List.Item.Basic>Normal row</List.Item.Basic>

    <List.Item.Basic
      style={{
        ['--item-background-color' as string]:
          'var(--color-mint-green-12)',
      }}
    >
      Custom background color (not selected)
    </List.Item.Basic>

    <List.Item.Basic>Another normal row</List.Item.Basic>
  </List.Container>
)
```

### Pending state

Use the `pending` property on `List.Item.Basic` or `List.Item.Action` to show a skeleton overlay. Click and keyboard are disabled while pending.

```tsx
render(
  <List.Container>
    <List.Item.Action icon={fish_medium} title="Pending item ..." pending>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)
```

### Progress indicator

A single list item with a circular progress indicator in `List.Cell.Start`.

```tsx
render(
  <List.Container>
    <List.Item.Basic>
      <List.Cell.Start>
        <ProgressIndicator
          size="medium"
          showDefaultLabel
          labelDirection="horizontal"
        />
      </List.Cell.Start>
    </List.Item.Basic>
  </List.Container>
)
```

### Skeleton

Use the `skeleton` property on `List.Item.Basic`, `List.Item.Action` or `List.Item.Accordion` to show a skeleton overlay while content is loading.

```tsx
render(
  <List.Container>
    <List.Item.Action icon={fish_medium} title="Loading item…" skeleton>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)
```

### Inside a Card

Use `List.Card` to wrap a list inside a [Card](/uilib/components/card) with built-in styling. Add `List.ScrollView` for a scrollable area with a `maxVisibleListItems` property.

```tsx
render(
  <List.Card>
    <Heading size="medium">Transactions</Heading>

    <List.ScrollView maxVisibleListItems={4}>
      <List.Container>
        <List.Item.Action icon={fish_medium} title="Payment received">
          <List.Cell.End>
            <Value.Currency value={1234} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Transfer sent">
          <List.Cell.End>
            <Value.Currency value={-500} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Subscription">
          <List.Cell.End>
            <Value.Currency value={-99} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Refund">
          <List.Cell.End>
            <Value.Currency value={250} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Salary">
          <List.Cell.End>
            <Value.Currency value={45000} />
          </List.Cell.End>
        </List.Item.Action>

        <List.Item.Action icon={fish_medium} title="Groceries">
          <List.Cell.End>
            <Value.Currency value={-320} />
          </List.Cell.End>
        </List.Item.Action>
      </List.Container>
    </List.ScrollView>
  </List.Card>
)
```

#### Inside a Card without ScrollView

`List.Card` also works without `List.ScrollView`. Side borders and redundant top/bottom borders on the first and last items are automatically removed.

```tsx
render(
  <List.Card innerSpace="x-small">
    <List.Container>
      <List.Item.Action
        icon={fish_medium}
        title="Payment received"
        onClick={() => {}}
      >
        <List.Cell.End>
          <Value.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action
        icon={fish_medium}
        title="Transfer sent"
        onClick={() => {}}
      >
        <List.Cell.End>
          <Value.Currency value={-500} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Basic icon={fish_medium} title="Subscription">
        <List.Cell.End>
          <Value.Currency value={-99} />
        </List.Cell.End>
      </List.Item.Basic>
    </List.Container>
  </List.Card>
)
```

#### With ShowMoreButton and visibleCount

Use `List.ShowMoreButton` to add a "Show more" / "Show less" toggle outside the list. Link it to `List.Container` by giving both the same `id`. Set `visibleCount` on the container to limit how many items are visible when collapsed.

```tsx
<Flex.Horizontal justify="space-between" align="center" bottom>
  <Heading size="medium" top={false} bottom={false}>
    Transactions
  </Heading>
  <List.ShowMoreButton id="my-limited-list" />
</Flex.Horizontal>
<List.Container id="my-limited-list" visibleCount={3}>
  <List.Item.Action icon={fish_medium} title="Payment received">
    <List.Cell.End>
      <Value.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Accordion
    icon={fish_medium}
    title="Transfer sent (Accordion)"
  >
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <Value.Currency value={-500} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Details about the transfer go here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
   <List.Item.Basic icon={fish_medium} title="Subscription">
    <List.Cell.End>
      <Value.Currency value={-99} />
    </List.Cell.End>
  </List.Item.Basic>
   <List.Item.Action icon={fish_medium} title="Refund">
    <List.Cell.End>
      <Value.Currency value={250} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Action icon={fish_medium} title="Salary">
    <List.Cell.End>
      <Value.Currency value={45000} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Accordion icon={fish_medium} title="Groceries (Accordion)">
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <Value.Currency value={-320} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Details about the transfer go here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>
```

## List.Container

```json
{
  "props": {
    "separated": {
      "doc": "When `true`, adds row gap between items so each row keeps its own outline and border radius instead of running edge-to-edge.",
      "type": "boolean",
      "status": "optional"
    },
    "skeleton": {
      "doc": "When `true`, applies skeleton font styling to all child items. Individual items can override this with their own `skeleton` prop.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "When `true`, all child items are visually dimmed and interaction is prevented. Individual items can override this with their own `disabled` prop.",
      "type": "boolean",
      "status": "optional"
    },
    "visibleCount": {
      "doc": "Limits the number of visible child items. When used without an `id`, the list is always capped at this count. When paired with `List.ShowMoreButton` via a shared `id`, the list starts collapsed and expands to show all items on toggle. Hidden items stay mounted in the DOM to preserve internal state (e.g. open accordions). The list is wrapped in a `HeightAnimation` so expand/collapse transitions are animated.",
      "type": "number",
      "status": "optional"
    },
    "children": {
      "doc": "List items. Use `List.Item.Basic`, `List.Item.Action`, or `List.Item.Accordion` as direct children.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Item.Basic

```json
{
  "props": {
    "selected": {
      "doc": "When provided, the row is treated as a selectable item for nested checkbox/radio controls. When `true`, it also applies the selected state styling (e.g. background).",
      "type": "boolean",
      "status": "optional"
    },
    "pending": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown (loading state). Disables pointer events on the item.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "If set to `true`, the item is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.",
      "type": "boolean",
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, applies skeleton font styling to the item (text placeholder animation). Use for loading state without the full overlay from `pending`.",
      "type": "boolean",
      "status": "optional"
    },
    "icon": {
      "doc": "Optional icon (e.g. `fish_medium` or an icon element). Rendered at the start of the row.",
      "type": "IconIcon",
      "status": "optional"
    },
    "title": {
      "doc": "Optional title. Rendered after the icon when provided.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "Item content. Typically `List.Cell.Start`, `List.Cell.Center`, `List.Cell.End`, `List.Cell.Title` (use `List.Cell.Title.Overline`/`List.Cell.Title.Subline` for overline/subline text), or the drop-in `List.Cell.Title.Overline`/`List.Cell.Title.Subline` components, or `List.Cell.Footer`.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Item.Action

```json
{
  "props": {
    "title": {
      "doc": "Optional title for the action item.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "icon": {
      "doc": "Optional icon for the action item (e.g. `fish_medium`).",
      "type": "IconIcon",
      "status": "optional"
    },
    "href": {
      "doc": "When set, renders as a native link (`<a>`) so the item navigates to the URL. Use for external or internal navigation. When not set, the item behaves as a button (use `onClick` for custom handling).",
      "type": "string",
      "status": "optional"
    },
    "to": {
      "doc": "Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.",
      "type": "string",
      "status": "optional"
    },
    "element": {
      "doc": "Define what HTML or React element should be used for the link (e.g. `element={Link}` for React Router). Only applicable when `href` or `to` is set.",
      "type": "React.Element",
      "status": "optional"
    },
    "elementProps": {
      "doc": "Additional props forwarded to the `element` component (e.g. `{ replace: true, state: { from: \"list\" } }` for React Router Link).",
      "type": "object",
      "status": "optional"
    },
    "target": {
      "doc": "Link target (e.g. `_blank` for new tab). Only applicable when `href` is set.",
      "type": "string",
      "status": "optional"
    },
    "rel": {
      "doc": "Link rel (e.g. `noopener noreferrer` for external links). Only applicable when `href` is set.",
      "type": "string",
      "status": "optional"
    },
    "onClick": {
      "doc": "Called when the user clicks or activates the item (Enter/Space key). Receives the native mouse event.",
      "type": "(event) => void",
      "status": "optional"
    },
    "chevronPosition": {
      "doc": "Placement of the chevron icon. Defaults to `right`. Use `left` to show the chevron on the left side.",
      "type": ["\"left\"", "\"right\""],
      "defaultValue": "\"right\"",
      "status": "optional"
    },
    "pending": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown (loading state). Disables click and keyboard while active.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "If set to `true`, the item is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.",
      "type": "boolean",
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, applies skeleton font styling to the item (text placeholder).",
      "type": "boolean",
      "status": "optional"
    },
    "children": {
      "doc": "Additional cells (e.g. `List.Cell.End` for value). A chevron icon is rendered at the end automatically.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[List.Item.Basic](/uilib/components/list/properties/#listitembasic)": {
      "doc": "Inherits List.Item.Basic properties (variant, selected, spacing, etc.).",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Item.Accordion

```json
{
  "props": {
    "icon": {
      "doc": "Optional icon for the accordion header (e.g. `fish_medium`).",
      "type": "IconIcon",
      "status": "optional"
    },
    "title": {
      "doc": "Optional title for the accordion header.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "chevronPosition": {
      "doc": "Placement of the chevron icon. Defaults to `right`. Use `left` to show the chevron on the left side.",
      "type": ["\"left\"", "\"right\""],
      "defaultValue": "\"right\"",
      "status": "optional"
    },
    "open": {
      "doc": "Initial open state. Defaults to `false`. The accordion can be toggled by the user via the header.",
      "type": "boolean",
      "defaultValue": "false",
      "status": "optional"
    },
    "keepInDOM": {
      "doc": "When `true`, keeps the accordion content in the DOM when closed. Defaults to `false`.",
      "type": "boolean",
      "defaultValue": "false",
      "status": "optional"
    },
    "disabled": {
      "doc": "If set to `true`, the accordion is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.",
      "type": "boolean",
      "defaultValue": "false",
      "status": "optional"
    },
    "onChange": {
      "doc": "Called when the accordion open state changes. Receives an object with the `expanded` state.",
      "type": "({ expanded }) => void",
      "status": "optional"
    },
    "children": {
      "doc": "Header cells (e.g. `List.Cell.Start`, `List.Cell.Title`/`List.Cell.Title.Overline`, `List.Cell.End`) and optionally `List.Item.Accordion.Content` for the expandable section.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[List.Item.Basic](/uilib/components/list/properties/#listitembasic)": {
      "doc": "Inherits List.Item.Basic properties (variant, pending, spacing, etc.).",
      "type": "Various",
      "status": "optional"
    }
  }
}
```

## List.Item.Accordion.Header

```json
{
  "props": {
    "children": {
      "doc": "Header cells (e.g. `List.Cell.Start`, `List.Cell.Title.Overline`, `List.Cell.End`). The chevron, icon, and title from the parent accordion are rendered automatically.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Flex.Item](/uilib/layout/flex/item/properties)": {
      "doc": "Renders as a `Flex.Item`. Supports all `Flex.Item` properties.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Item.Accordion.Content

```json
{
  "props": {
    "children": {
      "doc": "Content displayed inside the expandable accordion body.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Title

```json
{
  "props": {
    "fontSize": {
      "doc": "Font size of the title content. Defaults to `basis`. Use `small` for smaller text.",
      "type": ["\"small\"", "\"basis\""],
      "defaultValue": "\"basis\"",
      "status": "optional"
    },
    "children": {
      "doc": "Title content of the list item. Equivalent to using the `title` prop on `List.Item.Basic` or `List.Item.Action`. You can nest `List.Cell.Title.Overline`/`List.Cell.Title.Subline` inside the component for the overline/subline text.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Title.Overline

```json
{
  "props": {
    "fontSize": {
      "doc": "Font size of the overline content. Defaults to `x-small`.",
      "type": ["\"basis\"", "\"small\"", "\"x-small\""],
      "defaultValue": "\"x-small\"",
      "status": "optional"
    },
    "fontWeight": {
      "doc": "Font weight of the overline content. Defaults to `medium`.",
      "type": ["\"regular\"", "\"medium\""],
      "defaultValue": "\"medium\"",
      "status": "optional"
    },
    "children": {
      "doc": "Overline content of the list item, shown above the main title row. Use via `List.Cell.Title.Overline` when nesting inside the title block (or drop-in as `List.Cell.Title.Overline`). Pairs with `List.Cell.Title.Subline` inside the block.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Title.Subline

```json
{
  "props": {
    "variant": {
      "doc": "Visual variant. Use `description` for smaller, muted text style.",
      "type": ["\"description\""],
      "status": "optional"
    },
    "fontSize": {
      "doc": "Font size of the subline content. Defaults to `small`. When `variant=\"description\"`, defaults to `x-small`.",
      "type": ["\"basis\"", "\"small\"", "\"x-small\""],
      "defaultValue": "\"small\"",
      "status": "optional"
    },
    "fontWeight": {
      "doc": "Font weight of the subline content. Defaults to `regular`.",
      "type": ["\"regular\"", "\"medium\""],
      "defaultValue": "\"regular\"",
      "status": "optional"
    },
    "children": {
      "doc": "Subline content of the list item, shown below the title. Use via `List.Cell.Title.Subline` when nesting inside the title block (or as standalone `List.Cell.Title.Subline`). Pairs with List.Cell.Title.Overline or `List.Cell.Title.Overline`.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Start

```json
{
  "props": {
    "fontSize": {
      "doc": "Font size of the start content. Defaults to `basis`. Use `small` for smaller text.",
      "type": ["\"small\"", "\"basis\""],
      "defaultValue": "\"basis\"",
      "status": "optional"
    },
    "fontWeight": {
      "doc": "Font weight of the start content. Defaults to `regular`.",
      "type": ["\"regular\"", "\"medium\""],
      "defaultValue": "\"regular\"",
      "status": "optional"
    },
    "children": {
      "doc": "Start content of the list item (e.g. icon, label).",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Center

```json
{
  "props": {
    "fontSize": {
      "doc": "Font size of the center content. Defaults to `basis`. Use `small` for smaller text.",
      "type": ["\"small\"", "\"basis\""],
      "defaultValue": "\"basis\"",
      "status": "optional"
    },
    "fontWeight": {
      "doc": "Font weight of the center content. Defaults to `regular`.",
      "type": ["\"regular\"", "\"medium\""],
      "defaultValue": "\"regular\"",
      "status": "optional"
    },
    "children": {
      "doc": "Center content of the list item. Grows to fill available space.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.End

```json
{
  "props": {
    "fontWeight": {
      "doc": "Font weight of the end content. Defaults to `medium`.",
      "type": ["\"regular\"", "\"medium\""],
      "defaultValue": "\"medium\"",
      "status": "optional"
    },
    "fontSize": {
      "doc": "Font size of the end content. Defaults to `basis`. Use `small` for smaller text.",
      "type": ["\"small\"", "\"basis\""],
      "defaultValue": "\"basis\"",
      "status": "optional"
    },
    "children": {
      "doc": "End content of the list item (e.g. value, action).",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Cell.Footer

```json
{
  "props": {
    "children": {
      "doc": "Footer content of the list item. Grows to fill available space.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.Card

```json
{
  "props": {
    "children": {
      "doc": "Card content. Typically a `List.Container` (optionally wrapped in `List.ScrollView`). The card provides a visual container with border-radius resets and scrollbar integration for the list inside it.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "responsive": {
      "doc": "When `true`, the card adjusts its layout for smaller screens. Defaults to `true`.",
      "type": "boolean",
      "defaultValue": "true",
      "status": "optional"
    },
    "[Card](/uilib/components/card/properties)": {
      "doc": "All [Card](/uilib/components/card) properties are supported. The card renders with `stack` layout by default.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.ScrollView

```json
{
  "props": {
    "children": {
      "doc": "Scrollable content. Typically a `List.Container` with list items.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "maxVisibleListItems": {
      "doc": "Sets the maximum visible list items before the content scrolls. The component measures the rendered height of the first visible items. An explicit `style.maxHeight` overrides this.",
      "type": "number",
      "status": "optional"
    },
    "skeleton": {
      "doc": "When `true`, applies skeleton font styling to all child items inside the scroll view. Propagated via context so nested `List.Container` and items inherit it.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "When `true`, dims all child items and prevents interaction. Propagated via context so nested `List.Container` and items inherit it.",
      "type": "boolean",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## List.ShowMoreButton

```json
{
  "props": {
    "id": {
      "doc": "Shared identifier that links this button to a `List.Container` with the same `id`. Controls the expanded/collapsed state via `useSharedState`.",
      "type": "string",
      "status": "required"
    },
    "showMore": {
      "doc": "Button label shown when the list is collapsed. Defaults to the localized `List.showMore` translation.",
      "type": "string",
      "status": "optional"
    },
    "showLess": {
      "doc": "Button label shown when the list is expanded. Defaults to the localized `List.showLess` translation.",
      "type": "string",
      "status": "optional"
    },
    "[Button](/uilib/components/button/properties)": {
      "doc": "All [Button](/uilib/components/button) properties are supported except `variant`, `text`, `icon`, and `onClick` which are managed internally.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## Translations

```json
{
  "locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
  "entries": {
    "List.showLess": {
      "nb-NO": "Vis mindre",
      "en-GB": "Show less",
      "sv-SE": "Visa mindre",
      "da-DK": "Vis mindre"
    },
    "List.showMore": {
      "nb-NO": "Vis mer",
      "en-GB": "Show more",
      "sv-SE": "Visa mer",
      "da-DK": "Vis mere"
    }
  }
}
```

## List.Item.Action Events

```json
{
  "props": {
    "onClick": {
      "doc": "Fired when the user clicks or activates `List.Item.Action` (click or Enter/Space key). Receives the native event. Only applicable to `List.Item.Action`.",
      "type": "(event) => void",
      "status": "optional"
    }
  }
}
```

## List.Item.Accordion Events

```json
{
  "props": {
    "onClick": {
      "doc": "Fired when the user clicks or activates the accordion header (click or Enter/Space key). In controlled mode (when `open` is provided), use this to update the `open` prop. Receives the native event.",
      "type": "(event) => void",
      "status": "optional"
    }
  }
}
```