🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

List

Lists group related content. They can be ordered or unordered.

Overview


Import

Import the component from @faststore/ui

import { List } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/atoms/List/styles.scsss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage

  • Great Unordered List
  • Ok Unordered List
  • Bad Unordered List
<List marker>
  <li>Great Unordered List</li>
  <li>Ok Unordered List</li>
  <li>Bad Unordered List</li>
</List>

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-list
markerbooleanSpecify whether or not this component should display the list's markers (bullets or numbers).

Design Tokens

Local tokenDefault value/Global token linked
--fs-list-style-unorderedinitial
--fs-list-style-ordereddecimal

Variants

Unordered

<List marker>
  <li>Great Unordered List</li>
  <li>Ok Unordered List</li>
  <li>Bad Unordered List</li>
</List>

Ordered

<List as="ol" marker>
  <li>Great Ordered List</li>
  <li>Ok Ordered List</li>
  <li>Bad Ordered List</li>
</List>

Without marker

<List as="ol">
  <li>Great</li>
  <li>Ok</li>
  <li>Bad</li>
</List>

Customization

For further customization, you can use the following data attributes:

data-fs-list

data-fs-list-marker="true"