List

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

React

Import

import {
  List,
  ListItem,
  ListIcon,
  OrderedList,
  UnorderedList,
} from '@hoverinc/design-system-react-web';

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={iconHeartOutlined} />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus
    eveniet a libero incidunt suscipit.
  </ListItem>
  <ListItem>
    <ListIcon color="success.500" icon={iconHeartFilled} />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </ListItem>
  <ListItem>
    <ListIcon color="danger.500" icon={iconLightBulb} />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
  <ListItem>
    <ListIcon color="warning.500" icon={iconBattery} />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
</List>

Link Overlay

Loader