Skip to main content

List

Examples

List

View standalone
  • Item 1
  • Item 2
  • Item 3
Code
<List>
  <ListItem>
    Item 1
  </ListItem>
  <ListItem>
    Item 2
  </ListItem>
  <ListItem>
    Item 3
  </ListItem>
</List>

List Without Gap

View standalone

A default gap is applied to all lists but this can be removed by passing "none" to the gap prop.

  • Item 1
  • Item 2
  • Item 3
Code
<List gap="none">
  <ListItem>
    Item 1
  </ListItem>
  <ListItem>
    Item 2
  </ListItem>
  <ListItem>
    Item 3
  </ListItem>
</List>

List Type

View standalone

Lists can have a type of either disc (default), check, none or numeric. The list won't be indented by default if none is specified.

  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3
Code
<Flex
  alignItems="flex-start"
  gap="32px"
>
  <List type="disc">
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
  <List type="check">
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
  <List type="none">
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
  <List type="numeric">
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
</Flex>

List With Long Text Content

View standalone
  • For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
  • For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
  • For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
Code
<List
  atoms={{
    maxInlineSize: 'md'
  }}
>
  <ListItem>
    For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
  </ListItem>
  <ListItem>
    For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
  </ListItem>
  <ListItem>
    For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely. For pharmacy patients, MEDCounselor offers drug information to help patients take their medications safely.
  </ListItem>
</List>

List With Large Font Size

View standalone
  • Item 1
  • Item 2
  • Item 3
Code
<Text
  as="div"
  size="lg"
>
  <List
    atoms={{
      maxInlineSize: 'md'
    }}
  >
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
</Text>

List With Small Font Size

View standalone
  • Item 1
  • Item 2
  • Item 3
Code
<Text
  as="div"
  size="xs"
>
  <List
    atoms={{
      maxInlineSize: 'md'
    }}
  >
    <ListItem>
      Item 1
    </ListItem>
    <ListItem>
      Item 2
    </ListItem>
    <ListItem>
      Item 3
    </ListItem>
  </List>
</Text>

Props

List

gap

ConditionalStyleWithResponsiveArray<Values<{ none: number; "4px": CSSVarFunction; "8px": CSSVarFunction; "12px": CSSVarFunction; "16px": CSSVarFunction; "20px": CSSVarFunction; ... 10 more ...; "160px": CSSVarFunction; }, { ...; }>, string[] & { ...; }>

Content renders with specified gap between the rows or columns if specified.

Default: "8px"

type

"none" | "disc" | "check" | "numeric"

If 'none' is passed to type, the type will be 'none' and won't be indented. By default the type will be `disc` for `ul` and `numeric` for `ol`.

Default: "disc"

as

"ul" | "ol"

Content renders as a 'ol' if 'ol' is passed. Default is 'ul'.

className

string

The className property sets the value of the class attribute of the element.

ListItem

type

"none" | "disc" | "check" | "numeric"

If 'none' is passed to type, the type will be 'none' and won't be indented. By default the type will be `disc` for `ul` and `numeric` for `ol`.

Default: "disc"

className

string