List#

Demos#

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

This example demonstrates different cell layouts and their placement.

Start
Center
End
Title
End
Overline
Title
Subline
End
Footer

<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#

Navigate to details
Left aligned chevron

<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").

<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>

Navigable item with custom element#

Use the element prop to render a custom link component such as React Router's Link. Pass the route via the to prop directly on List.Item.Action — the entire row will be clickable.

Navigate with custom element

// Example using a custom link component (e.g. React Router's Link).
// Pass the component via the `element` prop and the route via `to`.
function MyLink({ to, children, ...rest }) {
  return (
    <a href={to} {...rest}>
      {children}
    </a>
  )
}
render(
  <List.Container>
    <List.Item.Action
      element={MyLink}
      to="#custom-route"
      icon={fish_medium}
      title="Navigate with custom element"
    >
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>
  </List.Container>
)

With anchor#

List items containing Anchor links.

<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.

Accordion title
Opened by default
This section is open initially.
Chevron on the left

<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 in List.Cell.End to show status or counts.

In Action Item
Badge
In Accordion Item
Notifications 3

<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 in the list row.

Item with actions
Action item with footer
Do not put interactive elements (e.g. Button) inside a footer when using List.Item.Action.
Accordion title
Do not put interactive elements (e.g. Button) inside a footer when using List.Item.Accordion.

<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 footer">
    <List.Cell.End>
      <Value.Currency value={5678} />
    </List.Cell.End>
    <List.Cell.Footer>
      <Span>
        Do not put interactive elements (e.g. Button) inside a footer when
        using List.Item.Action.
      </Span>
    </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)',
      }}
    >
      <P>
        Do not put interactive elements (e.g. Button) inside a footer when
        using List.Item.Accordion.
      </P>
    </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 with Grid.Item for a 12-column responsive grid.

Navigate to details
Navigate to details

Second Grid Item

<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.

Title 1
Title 2

<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>

Striped rows#

Use the striped property on List.Container to apply alternating row background colors. Set it to even to leave the first item uncolored and start the striping on the second item.

Alice Andersen
A
Administrator
Bob Berg
B
Editor
Carol Christensen
C
Viewer
David Dahl
D
Editor

<List.Container striped>
  <List.Item.Action title="Alice Andersen" onClick={() => {}}>
    <List.Cell.Start>
      <Avatar size="medium" hasLabel>
        A
      </Avatar>
    </List.Cell.Start>
    <List.Cell.End>Administrator</List.Cell.End>
  </List.Item.Action>

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

  <List.Item.Action title="Carol Christensen" onClick={() => {}}>
    <List.Cell.Start>
      <Avatar size="medium" hasLabel>
        C
      </Avatar>
    </List.Cell.Start>
    <List.Cell.End>Viewer</List.Cell.End>
  </List.Item.Action>

  <List.Item.Action title="David Dahl" onClick={() => {}}>
    <List.Cell.Start>
      <Avatar size="medium" hasLabel>
        D
      </Avatar>
    </List.Cell.Start>
    <List.Cell.End>Editor</List.Cell.End>
  </List.Item.Action>
</List.Container>

Dynamic list#

List item 1
List item 2
List item 3

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 in List.Cell.Start to show dates in the list row.

In Basic Item
7. feb.
7. feb.
In Action Item
7. feb.
In Accordion Item

<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.

Item 1
7. feb.
Item 2
Detail 1
Detail 2
Detail 3Detail 3
Title
Subline

<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 and Field.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.

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 in List.Cell.Start as the left content.

Alice Andersen
A
Bob Berg
B
Carol with image
C
Value

<List.Container>
  <List.Item.Basic title="Alice Andersen">
    <List.Cell.Start>
      <Avatar size="medium" hasLabel>
        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" hasLabel>
        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" hasLabel>
          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.

Normal row
Selected row
Another normal row

<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#

Normal row
Custom background color (not selected)
Another normal row

<List.Container>
  <List.Item.Basic>Normal row</List.Item.Basic>

  <List.Item.Basic
    style={{
      ['--list-item-background-color' as string]:
        'var(--token-color-background-positive-subtle)',
    }}
  >
    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.

Pending item ...

<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>

Disabled state#

Use the disabled property on List.Item.Action to dim the row and prevent interaction. Set it on List.Container to disable every item at once.

Navigate to details 1
Navigate to details 2
Navigate to details 3

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

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

  <List.Item.Action
    icon={fish_medium}
    title="Navigate to details 3"
    onClick={() => console.log('Clicked')}
  >
    <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.

Vennligst vent ...

<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.

Loading item…

<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 with built-in styling. Add List.ScrollView for a scrollable area with a maxVisibleListItems property.

Transactions

Payment received
Transfer sent
Subscription
Refund
Salary
Groceries

<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.

Payment received
Transfer sent
Subscription

<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.

Transactions

Payment received
Transfer sent (Accordion)
Subscription
Refund
Salary
Groceries (Accordion)

<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>

Suggest an edit