List

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

Overview

Import the component from @faststore/ui

import { List } from '@faststore/ui'

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.

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

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-list`
marker	`boolean`	Specify whether or not this component should display the list's markers (bullets or numbers).

Local token	Default value/Global token linked
`--fs-list-style-unordered`	`initial`
`--fs-list-style-ordered`	`decimal`

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

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

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

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

data-fs-list

data-fs-list-marker="true"