Skip to main content

Lists

Lists play a role in every interface.

Simple list​

  • Kappa
  • 4Head
  • PogChamp
  • FrankerZ
import { List, ListItem } from '@streamelements/frontend-ui';

<List>
  <ListItem>Kappa</ListItem>
  <ListItem>4Head</ListItem>
  <ListItem>PogChamp</ListItem>
  <ListItem>FrankerZ</ListItem>
</List>

Horizontal lists​

Lists can be vertical or horizontal. By default, the List component is vertical. By passing a property orientation you can set it to horizontal;

  • Kappa
  • 4Head
  • PogChamp
  • FrankerZ
import { List, ListItem } from '@streamelements/frontend-ui';

<List orientation="horizontal">
  <ListItem>Kappa</ListItem>
  <ListItem>4Head</ListItem>
  <ListItem>PogChamp</ListItem>
  <ListItem>FrankerZ</ListItem>
</List>

Props​

In addition to the general Stitches props like css and as the following props are available:

PropertyValueDefaultDescription
orientation'vertical' | 'horizontal''vertical'Sets the orientation of the list