Text List

This component allows you to quickly show a list of items. To use, import from @marvelapp/ui:

import { Box, List, Li, LiCheck, LiNumbered } from '@marvelapp/ui';

Numbered list

Traditional numbered list.

Feature 1
Feature 2
Feature 3

<List type="ordered">
  <Li p={2}>Feature 1</Li>
  <Li p={2}>Feature 2</Li>
  <Li p={2}>Feature 3</Li>
</List>

Checked list

Uses checkmarks instead of bullet points.

Feature 1
Feature 2
Feature 3

<List type="ordered">
  <LiCheck>Feature 1</LiCheck>
  <LiCheck>Feature 2</LiCheck>
  <LiCheck>Feature 3</LiCheck>
</List>

Styled numbered list

More aesthetically pleasing numbered list items.

1
Feature 1
2
Feature 2
3
Feature 3

<List type="ordered">
  <LiNumbered number={1}>Feature 1</LiNumbered>
  <LiNumbered number={2}>Feature 2</LiNumbered>
  <LiNumbered number={3}>Feature 3</LiNumbered>
</List>

List Props

Prop

Type

Default

children

React.Element

–

size

type

ordered

unordered