Figma

PictureWithDescription

import { PictureWithDescription } from '@megafon/ui-shared';

Базовое использование

<PictureWithDescription pictureUrl={Image1}>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

Встроенный заголовок

<PictureWithDescription pictureUrl={Image1} title="Личный кабинет">
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

Изображение справа

<PictureWithDescription pictureUrl={Image1} pictureAlign='right'>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
  <List>
      <ListItem>{listItems[0]}</ListItem>
      <ListItem>{listItems[1]}</ListItem>
      <ListItem>{listItems[2]}</ListItem>
      <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

Небольшое количество контента

<PictureWithDescription pictureUrl={Image2}>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
</PictureWithDescription>

Выравнивание текста по верхнему краю

<PictureWithDescription pictureUrl={Image2} isTextTopAlign>
  <Header as='h3' margin>{title}</Header>
  <Paragraph>{description}</Paragraph>
</PictureWithDescription>