List

List displays a container that groups elements in a list.

Import

import { List } from "@prismane/core";

List component has the following inner components:

- List.Unordered - The unordered list component.
- List.Ordered - The ordered list component.
- List.Item - The list item component.
- List.Icon - The list icon component.

Usage

By default, List component renders a list with no styling.

<List>
  <List.Item>First</List.Item>
  <List.Item>Second</List.Item>
  <List.Item>Third</List.Item>
</List>

Unordered List

The List.Unordered will render a List component as a ul.

<List.Unordered ml={fr(5)}>
  <List.Item>First</List.Item>
  <List.Item>Second</List.Item>
  <List.Item>Third</List.Item>
</List.Unordered>

Ordered List

The List.Ordered will render a List component as an ol.

<List.Ordered ml={fr(5)}>
  <List.Item>First</List.Item>
  <List.Item>Second</List.Item>
  <List.Item>Third</List.Item>
</List.Ordered>

List With Icon

By providing a List.Icon

<List>
  <List.Item>
    <List.Icon>
      <Fire />
    </List.Icon>
    First
  </List.Item>
  <List.Item>
    <List.Icon>
      <Fire />
    </List.Icon>
    Second
  </List.Item>
  <List.Item>
    <List.Icon>
      <Fire />
    </List.Icon>
    Third
  </List.Item>
</List>

List Spacing

By default, the Link component extends the Flex component, allowing it to easily space out its elements, by providing a value to the gap prop.

<List gap={fr(2)}>
  <List.Item>First</List.Item>
  <List.Item>Second</List.Item>
  <List.Item>Third</List.Item>
</List>

Horizontal List

By default, the Link component extends the Flex component, allowing it to easily be made into a horizontal list, by providing a value of row to the direction prop.

<List direction="row" gap={fr(2)}>
  <List.Item>First</List.Item>
  <List.Item>Second</List.Item>
  <List.Item>Third</List.Item>
</List>

List With Divider

It is very common to combine List and Divider components together.

<List gap={fr(2)} w={fr(96)}>
  <List.Item>First</List.Item>
  <Divider size="xs" />
  <List.Item>Second</List.Item>
  <Divider size="xs" />
  <List.Item>Third</List.Item>
</List>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- List

Go BackLink

Up NextMain