Figma

TextBox

import { TextBox } from '@megafon/ui-shared';
Content
<Header as="h3" margin>
    В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:
</Header>
<Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими
    текстовыми сообщениями. Вы можете отправить SMS-сообщение даже на городской
    телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в
    голосовое и зачитает его адресату.
</Paragraph>
<Header as="h3" margin>
    В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:
</Header>
<Header as="h5" margin>Путешествуй без забот</Header>
<TextBoxPicture url={Image} />
<Paragraph>
    Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона,
    минуты и SMS по России.
    <Link href="https://megafon.ru">Click me</Link>
</Paragraph>
<List>
    <ListItem>Тарифы</ListItem>
    <ListItem>Интернет</ListItem>
    <ListItem>Связь</ListItem>
    <ListItem>Услуги</ListItem>
</List>
<Paragraph size="small">
    Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам
</Paragraph>
ContentForExampleWithPicture
<Paragraph>
    Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими текстовыми сообщениями. Вы можете
    отправить SMS-сообщение даже на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое сообщение в
    голосовое и зачитает его адресату.
</Paragraph>

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

<TextBox>
  <Content />
</TextBox>

Горизонтальное выравнивание текста по центру

<TextBox textCenter={true}>
  <Content />
</TextBox>

Ограничение по ширине

По умолчанию

<TextBox isFullWidth={false}>
  <Content />
</TextBox>

Горизонтальное выравнивание текста по центру

<TextBox isFullWidth={false} textCenter={true}>
  <Content />
</TextBox>

Горизонтальное выравнивание компонента по центру

<TextBox isFullWidth={false} centeringWithLimitedWidth={true}>
  <Content />
</TextBox>

Горизонтальное выравнивание и компонента, и текста по центру

<TextBox isFullWidth={false} centeringWithLimitedWidth={true} textCenter={true}>
  <Content />
</TextBox>

Изображение

Увеличены вертикальные отступы

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-vertical" />
  <ContentForExampleWithPicture />
</TextBox>

Увеличен нижний отступ

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-bottom" />
  <ContentForExampleWithPicture />
</TextBox>

Увеличены верхний отступы

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" />
  <ContentForExampleWithPicture />
</TextBox>

Картинка без рамки

<TextBox>
  <ContentForExampleWithPicture />
  <TextBoxPicture url={Image} margin="big-top" disableBorder />
  <ContentForExampleWithPicture />
</TextBox>

Компонент TextWithIcon

<TextBox>
  <Paragraph>
      Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими текстовыми сообщениями. Вы
      можете отправить SMS-сообщение даже на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
      сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <Header>Заголовок после компонента TextWithIcon</Header>
  <Paragraph>
      Услуга SMS (Short Message Service) позволяет обмениваться с телефона небольшими текстовыми сообщениями. Вы
      можете отправить SMS-сообщение даже на городской телефон. Услуга «Голосовое SMS» превратит обычное текстовое
      сообщение в голосовое и зачитает его адресату.
  </Paragraph>
  <TextWithIcon items={textWithIconItems} />
  <TextBoxPicture url={Image} margin="big-top" />
  <TextWithIcon items={textWithIconItems} title="Заголовок компонента TextWithIcon" />
</TextBox>