Blueprint

GuidesFoundationComponentsReleases
⌘K

List

List is used to display list items. It renders a <ul> element by default.

React

Import


import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from '@hover/blueprint';

Unordered List

live

<UnorderedList>
<ListItem>Lorem ipsum dolor sit amet</ListItem>
<ListItem>Consectetur adipiscing elit</ListItem>
<ListItem>Integer molestie lorem at massa</ListItem>
<ListItem>Facilisis in pretium nisl aliquet</ListItem>
</UnorderedList>

Ordered List

live

<OrderedList>
<ListItem>Lorem ipsum dolor sit amet</ListItem>
<ListItem>Consectetur adipiscing elit</ListItem>
<ListItem>Integer molestie lorem at massa</ListItem>
<ListItem>Facilisis in pretium nisl aliquet</ListItem>
</OrderedList>

Unstyled List with icon

Add icons to the list items by using the ListIcon component and passing a system icon to the icon.

live

<List spacing={3}>
<ListItem>
<ListIcon color="success.500" icon={iAward} />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus
eveniet a libero incidunt suscipit.
</ListItem>
<ListItem>
<ListIcon color="success.500" icon={iAward} />
Assumenda, quia temporibus eveniet a libero incidunt suscipit
</ListItem>
<ListItem>
<ListIcon color="danger.500" icon={iFrown} />
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
</ListItem>
<ListItem>
<ListIcon color="warning.500" icon={iAtSign} />
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
</ListItem>
</List>