List
Component for unordered or ordered list.
The <List> component is used to display an unordered or ordered list.
The list is divided into two parts: <List> and <List.Item>.
By default, the application displays an unordered (ul) list. However, this list can also be displayed as an ordered (ol) list.
The <List.Items> in unordered lists are marked with bullets and in an ordered list are marked with numbers.
Import
import { List } from '@marigold/components';Apperance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
as | ul ⎮ ol | ul | Displaying a unordered or ordered list for showing Information |
Usage
Unordered list
In this example you can see how to use a unordered list.
Preview
Code
- Cheese
- Milk
- Bread
Ordered list
In this example you can see how to use the as property for an ordered list.
Preview
Code
- Black Tea
- Green Tea
- Chai Tea
Nested Unordered List
It is also possible to create a unordered nested list. Here for the <List> is wrapped inside the <List.Item>.
Preview
Code
- Crispy Chicken Burger
- Hähnchen Filet im Crunchy Cornflakes Mantel
- Cream Cheese Chicken Burger
- Hähnchen Filet im Crunchy Cornflakes Mantel
- Rucola
- Frischkäse
- Farmer
- Rindfleisch
- Bacon
- Spiegelei