Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
List

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

Lists group related content. They can be ordered or unordered.
Example
Code
  • Great Unordered List
  • Ok Unordered List
  • Bad Unordered List
  1. Great Ordered List
  2. Ok Ordered List
  3. Bad Ordered List
  • Great
  • Ok
  • Bad

Usage

Import the component


_10
import { List } from '@faststore/ui'

Import styles

To apply styles, include the following in your stylesheet:

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


Examples

Unordered


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

Ordered


_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>

Without marker


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


Design tokens

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

Data attributes

You can target and override List styles using the following data attributes:
data-fs-list
data-fs-list-marker="true"

Props

NameTypeDescriptionDefault
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page