List
Lists group-related content. They can be ordered or unordered.
The
List component groups related content in an organized manner, supporting both ordered and unordered formats. Typical use cases include:- Displaying product features or specifications.
- Listing store benefits or policies (e.g.,
Free shipping,Easy returns,Secure checkout).
Example
Code
- First item unordered list
- Second item unordered list
- Third item unordered list
- First item ordered list
- Second item ordered list
- Third item ordered list
- First item
- Second item
- Third item
Usage
Import the component
_10import { 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';
For details, see Importing FastStore UI component styles.
Examples
Unordered list
Example
Code
- First item unordered list
- Second item unordered list
- Third item unordered list
Ordered list
Example
Code
- First item ordered list
- Second item ordered list
- Third item ordered list
Unordered list without marker
Example
Code
- First item
- Second item
- Third item
Ordered list without marker
Example
Code
- First item
- Second item
- Third item
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-list-style-unordered | initial |
--fs-list-style-ordered | decimal |
Data attributes
You can target and override
List styles using the following data attributes:data-fs-listdata-fs-list-marker="true"Props
| Name | Type | Description | Default |
|---|