Skip to content
Home

List

Info
Demos
Properties
Events

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

Code Editor
<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(--color-sand-yellow)',
      }}
    >
      <P>Footer</P>
    </List.Cell.Footer>
  </List.Item.Basic>
</List.Container>

Navigable item

  • Navigate to details
  • Left aligned chevron
Code Editor
<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").

Code Editor
<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 links.

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

  • Opened by default

    This section is open initially.

Code Editor
<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
Code Editor
<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} showEmpty />
        </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 button
Code Editor
<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} showEmpty />
    </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(--color-sand-yellow)',
      }}
    >
      <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 with Grid.Item for a 12-column responsive grid.

  • Navigate to details
  • Navigate to details

Second Grid Item

Code Editor
<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(--color-sand-yellow)',
    }}
  >
    <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
Code Editor
<List.Container separated>
  <List.Item.Basic icon={fish_medium} title="Title 1">
    <List.Cell.End>
      <Value.Currency value={1234} showEmpty />
    </List.Cell.End>
  </List.Item.Basic>

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

Dynamic list

  • List item 1
  • List item 2
  • List item 3
Code Editor
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
  • In Action Item
Code Editor
<List.Container>
  <List.Item.Basic title="In Basic Item">
    <List.Cell.Start fontSize="small">
      <DateFormat value={new Date()} dateStyle="medium" hideCurrentYear />
    </List.Cell.Start>
    <List.Cell.End>
      <Value.Currency value={1234} showEmpty />
    </List.Cell.End>
  </List.Item.Basic>

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

  <List.Item.Accordion>
    <List.Item.Accordion.Header>
      <List.Cell.Title>
        <List.Cell.Title.Overline>
          <DateFormat
            value={new Date()}
            dateStyle="medium"
            hideCurrentYear
          />
        </List.Cell.Title.Overline>
        In Accordion Item
      </List.Cell.Title>
      <List.Cell.End>
        <Value.Currency value={1234} showEmpty />
      </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
  • Title
    Subline
Code Editor
<List.Container>
  <List.Item.Action icon={fish_medium}>
    <List.Cell.Title>
      <span>Item 1</span>
      <List.Cell.Title.Subline>
        <DateFormat
          value={new Date()}
          dateStyle="medium"
          hideCurrentYear
        />
      </List.Cell.Title.Subline>
    </List.Cell.Title>
    <List.Cell.End>
      <Value.Currency value={5678} showEmpty />
    </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} showEmpty />
      </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>
      <Flex.Vertical gap={false}>
        <Value.Currency value={5678} showEmpty />
        <List.Cell.Title.Subline variant="description">
          Subline
        </List.Cell.Title.Subline>
      </Flex.Vertical>
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

With form elements

  • Item with icon
Code Editor
<List.Container>
  <List.Item.Basic>
    <List.Cell.Start>
      <Field.Boolean label="Checkbox" />
    </List.Cell.Start>
    <List.Cell.End>
      <Value.Currency value={5678} showEmpty />
    </List.Cell.End>
  </List.Item.Basic>

  <List.Item.Basic>
    <List.Cell.Start>
      <Radio label="Radio" />
    </List.Cell.Start>
    <List.Cell.End>
      <NumberFormat currency value={1234} />
    </List.Cell.End>
  </List.Item.Basic>

  <List.Item.Action
    icon={fish_medium}
    title="Item with icon"
    onClick={() => console.log('Navigate')}
  >
    <List.Cell.End>
      <Value.Currency value={1234} showEmpty />
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

With avatar

Use Avatar in List.Cell.Start as the left content.

  • Alice Andersen
    A
  • Bob Berg
    B
Code Editor
<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} showEmpty />
    </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

  • Normal row
  • Selected row
  • Another normal row
Code Editor
<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
Code Editor
<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.

  • Pending item ...
Code Editor
<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.

  • Vennligst vent ...
Code Editor
<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…
Code Editor
<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>