Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsAtoms
List

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

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

Overview

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

Import

Import the component from @faststore/ui

_10
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:

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

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

Usage

  • Great Unordered List
  • Ok Unordered List
  • Bad Unordered List

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


Props

NameTypeDescriptionDefault

Design Tokens

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

Variants

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>


Customization

For further customization, you can use the following data attributes:
data-fs-list
data-fs-list-marker="true"
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page