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).

Overview Properties

Import

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

Demo

Change 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.

Nested lists

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

Change font and text style

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

Style inheritance

When used without textStyle or fontStyle props, List inherits from its surrounding context. Any inheritable CSS property not explicitly set by the component flows through from the parent.

Still have questions?

Find answers in the Dynatrace Community

Import​

Demo​

Change list type​

Nested lists​

Change font and text style​

Style inheritance​