Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Lists

Lists are great for listing out things – either ordered or unordered.

GitHub

Examples

A simple unordered list.

<List>
  <ListItem>
    First example
  </ListItem>
  <ListItem>
    Second example
  </ListItem>
  <ListItem>
    Third example
  </ListItem>
  <ListItem>
    Fourth example
  </ListItem>
</List>

A simple ordered list

<List as="ol">
  <ListItem>
    First example
  </ListItem>
  <ListItem>
    Second example
  </ListItem>
  <ListItem>
    Third example
  </ListItem>
  <ListItem>
    Fourth example
  </ListItem>
</List>

Guidelines

Lists should be used when there are several times in a row.

Code

<List />

import { List } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNodeA list of items
asstring"ul" (unordered) or "ol" (ordered)
variantstringplain or marker

<ListItem />

import { ListItem } from "@vygruppen/spor-react";

Can be used in both OrderedList and UnorderedList

Props

Name
Type
Required?
Description
childrenReact.ReactNode