List

The List component is a flexible list container that supports both unordered (ul) and ordered (ol) lists, and comes with a few built-in styles. The ListItem component is the ideal child for the List component, and represents an individual item in the list.

This is item 1
This is item 2
This is item 3

Import

import { List, ListItem } from '@ef-global/backpack/List';

List Props

Name	Type	Description
variant	ListVariants	The list style variant.
inverse	boolean	A boolean to indicate whether the list should be displayed in inverse mode. Defaults to `false`.
as	ListAsValues	The list type. Either 'ul' for unordered list or 'ol' for ordered list. Defaults to 'ul'.

ListItem Props

Name	Type	Description
children	React.ReactNode	The content of the list item.

Examples

In these examples, ListItem is the ideal child for the List component, which allows you to create a well-structured and organized list of items. By using ListItem as a child of List, you ensure that each item is properly styled and rendered within the list.

Default Unordered List

This is item 1
This is item 2
This is item 3

const DefaultExample = () => (
  <List>
    <ListItem>This is item 1</ListItem>
    <ListItem>This is item 2</ListItem>
    <ListItem>This is item 3</ListItem>
  </List>
);

Default Ordered List

This is item 1
This is item 2
This is item 3

const DefaultOrderedExample = () => (
  <List as="ol" />
);

List with Marker Variant

This is item 1
This is item 2
This is item 3

const MarkerVariantExample = () => (
  <List variant="marker">
    <ListItem>This is item 1</ListItem>
    <ListItem>This is item 2</ListItem>
    <ListItem>This is item 3</ListItem>
  </List>
);

List with Border Variant and Spacing

This is item 1
This is item 2
This is item 3

const BorderVariantExample = () => (
  <List variant="border">
    <ListItem className={'u-pt-s u-pb-s'}>This is item 1</ListItem>
    <ListItem className={'u-pt-s u-pb-s'}>This is item 2</ListItem>
    <ListItem className={'u-pt-s u-pb-s'}>This is item 3</ListItem>
  </List>
);

List with Flex Layout

This is item 1
This is item 2

const FlexLayoutExample = () => (
  <List variant="border">
    <ListItem className={'u-pt-s u-pb-s'}>
      <Flex direction={'row'} gap={'s'} align={'center'}>
        <FlexItem>
          <IconArrowRight />
        </FlexItem>
        <FlexItem>
          <Text as={'p'} variant={'body'}>
            This is item 1
          </Text>
        </FlexItem>
      </Flex>
    </ListItem>
    // ... more ListItem components
  </List>
);

List with Definitions

The following example demonstrates how to create a list with definitions using the List and ListItem components. This is achieved by wrapping the Text components inside Flex and FlexItem components to properly align and space the content.

This is title 1
This is item 1
This is title 2
This is item 2
This is title 3
This is item 3

import { List, ListItem } from '@/src/components/List';
import { Flex, FlexItem } from '@/src/components/Flex';
import { Text } from '@/src/components/Text';
<List>
  <ListItem>
    <Flex direction={'row'} gap={'s'} align={'center'} justify={'space-between'}>
      <FlexItem>
        <Text as={'p'} variant={'uiLabelBold'}>This is title 1</Text>
      </FlexItem>
      <FlexItem>
        <Text as={'p'} variant={'body'}>This is item 1</Text>
      </FlexItem>
    </Flex>
  </ListItem>
  <ListItem>
    <Flex direction={'row'} gap={'s'} align={'center'} justify={'space-between'}>
      <FlexItem>
        <Text as={'p'} variant={'uiLabelBold'}>This is title 2</Text>
      </FlexItem>
      <FlexItem>
        <Text as={'p'} variant={'body'}>This is item 2</Text>
      </FlexItem>
    </Flex>
  </ListItem>
  <ListItem>
    <Flex direction={'row'} gap={'s'} align={'center'} justify={'space-between'}>
      <FlexItem>
        <Text as={'p'} variant={'uiLabelBold'}>This is title 3</Text>
      </FlexItem>
      <FlexItem>
        <Text as={'p'} variant={'body'}>This is item 3</Text>
      </FlexItem>
    </Flex>
  </ListItem>
</List>

Image Lottie Player