List

The List component groups a set of related content in a list and can be arbitrarily nested. List items are preceded by either a consecutive number (for ordered lists) or a bullet point (for unordered lists).

OverviewProperties

The List component groups a set of related content in a list and can be arbitrarily nested. List items are preceded by either a consecutive number (for ordered lists) or a bullet point (for unordered lists).

Import

import { List } from '@dynatrace/strato-components/typography';

Use cases

CodeSandbox

Change the list type

By default, lists are unordered. To create an ordered list, you can set the ordered prop. For ordered lists, it is also possible to specify the start value of the first item in the list using the start prop.

CodeSandbox

Create nested lists

To create a nested list, simply place another List component as a child of the List component it belongs to.

CodeSandbox

Change font and text style

Use the fontStyle and textStyle props to change the visual style of the used font.

CodeSandbox