PictureWithDescription

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

Примеры и код
Свойства и методы

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

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими текстовыми сообщениями. Вы можете отправить SMS-сообщение даже на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в голосовое и зачитает его адресату.

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину
Выберите любой тариф из линейки тарифов «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату.
Оформите заказ и оплатите его удобным способом: онлайн или при получении
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту

<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}>
  <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>

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

Личный кабинет

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину
Выберите любой тариф из линейки тарифов «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату.
Оформите заказ и оплатите его удобным способом: онлайн или при получении
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту

<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} title="Личный кабинет">
  <Paragraph>{description}</Paragraph>
  <List>
    <ListItem>{listItems[0]}</ListItem>
    <ListItem>{listItems[1]}</ListItem>
    <ListItem>{listItems[2]}</ListItem>
    <ListItem>{listItems[3]}</ListItem>
  </List>
</PictureWithDescription>

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

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину
Выберите любой тариф из линейки тарифов «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату.
Оформите заказ и оплатите его удобным способом: онлайн или при получении
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту

<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={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>

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

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

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

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

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

В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:

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

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