List

The List component is designed to render ordered and unordered lists with optional list decorations, such as bullets and numbering. The ListItem component is used within List to create individual list items, ensuring each item adheres to the specified list style.

Effective Practices

When using the List and ListItem components, consider the following best practices:

Semantic Correctness: Use the correct list type and decoration to match the content’s context and importance.
Accessibility: Ensure that lists are used for appropriate content groupings to aid readability and navigation for screen readers.
Consistency: Maintain consistent styling across lists within your application to promote a cohesive user experience.

Usage Guidelines

List

Configures the list type and decoration. It switches between unordered (ul) and ordered (ol) list elements based on the decoration prop.

Unordered List

Item 1
Item 2

<List decoration="bullet">
  <ListItem>Item 1</ListItem>
  <ListItem>Item 2</ListItem>
</List>

Ordered List

First Item
Second Item

<List decoration="numbered">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
</List>

List without Decoration

Plain Item 1
Plain Item 2

<List>
  <ListItem>Plain Item 1</ListItem>
  <ListItem>Plain Item 2</ListItem>
</List>

ListItem

Used to create individual items within a List. ListItem components inherit styling from their parent List.

This is a bulleted item.

<ListItem>This is a bulleted item.</ListItem>

Props

List Props

interface ListProps

children ReactNode

The list items to render

decoration ? "none" | "bullet" | "numbered" | null

Optional decoration for each list item

Defaults to none