List

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

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

Example

Code

Usage


_10import { List } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


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


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


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


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

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

You can target and override List styles using the following data attributes:

data-fs-list

data-fs-list-marker="true"

Name	Type	Description	Default