Figma

List

import { List } from '@megafon/ui-core';

Выравнивание

По левому краю (по умолчанию)

<List>
  <ListItem>Тарифы</ListItem>
  <ListItem>Интернет</ListItem>
  <ListItem>Связь</ListItem>
  <ListItem>Услуги</ListItem>
</List>

По центру

<List align="center">
  <ListItem>Тарифы</ListItem>
  <ListItem>Интернет</ListItem>
  <ListItem>Связь</ListItem>
  <ListItem>Услуги</ListItem>
</List>

По правому краю

<List align="right">
  <ListItem>Тарифы</ListItem>
  <ListItem>Интернет</ListItem>
  <ListItem>Связь</ListItem>
  <ListItem>Услуги</ListItem>
</List>

Цвета

<div style={{ background: 'var(--stcWhite)' }}>
  <List color="black">
      <ListItem>black</ListItem>
  </List>
</div>

<div style={{ background: 'var(--stcBlack)' }}>
  <List color="white">
      <ListItem>white</ListItem>
  </List>
</div>

<List color="gray">
  <ListItem>gray</ListItem>
</List>

<List color="purple">
  <ListItem>purple</ListItem>
</List>

<List color="green">
  <ListItem>green</ListItem>
</List>

<List color="red">
  <ListItem>red</ListItem>
</List>

<div style={{ background: 'var(--stcWhite)', color: 'var(--systemBlue)' }}>
  <List color="inherit">
      <ListItem>inherit</ListItem>
  </List>
</div>

Нумерованный список

<List as="ol">
  <ListItem>Тарифы</ListItem>
  <ListItem>Интернет</ListItem>
  <ListItem>Связь</ListItem>
  <ListItem>Услуги</ListItem>
</List>