UI Components
Atoms
List

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

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

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
Coming Soon

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"

LinkLoader