TextWithIcon

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

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

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

Привлечение новых клиентов и повышение лояльности действующих

Специальные предложения для ваших клиентов

Понятная и простая реализация партнерстваих

<TextWithIcon>
  <TextWithIconItem
    text={['Привлечение новых клиентов и повышение лояльности действующих']}
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

<TextWithIcon>
  <TextWithIconItem
    text={['Привлечение новых клиентов и повышение лояльности действующих']}
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

Заголовок

Преимущества

Привлечение новых клиентов и повышение лояльности действующих

Специальные предложения для ваших клиентов

Понятная и простая реализация партнерстваих

<TextWithIcon title="Преимущества">
  <TextWithIconItem
    text="Привлечение новых клиентов и повышение лояльности действующих"
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

<TextWithIcon title="Преимущества">
  <TextWithIconItem
    text="Привлечение новых клиентов и повышение лояльности действующих"
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

Без ограничения по ширине

Преимущества

Привлечение новых клиентов и повышение лояльности действующих

Специальные предложения для ваших клиентов

Понятная и простая реализация партнерстваих

<TextWithIcon title="Преимущества" isFullWidth>
  <TextWithIconItem
    text="Привлечение новых клиентов и повышение лояльности действующих"
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

<TextWithIcon title="Преимущества" isFullWidth>
  <TextWithIconItem
    text="Привлечение новых клиентов и повышение лояльности действующих"
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

HTML-теги и спецсимволы

В свойстве text поддерживаются некоторые HTML-теги: "<br>, <b>, <font color>, <a href>" и спецсимвол &nbsp.

Описание должно быть примерно не более 130 символов.
Пишите содержательно, кратко и не будет проблем с текстовым контентом.

Специальные предложения для ваших клиентов

Понятная и простая реализация партнерстваих

<TextWithIcon>
  <TextWithIconItem
    text="Описание&nbspдолжно <a href='https://moscow.megafon.ru'>быть</a> <font color='#731982'>примерно</font> не более <b>130</b> символов.<br>Пишите содержательно, кратко и не будет проблем с текстовым контентом."
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>

<TextWithIcon>
  <TextWithIconItem
    text="Описание&nbspдолжно <a href='https://moscow.megafon.ru'>быть</a> <font color='#731982'>примерно</font> не более <b>130</b> символов.<br>Пишите содержательно, кратко и не будет проблем с текстовым контентом."
    icon={<Heart style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Специальные предложения для ваших клиентов"
    icon={<Star style={{ fill: '#00B956' }} />}
  />
  <TextWithIconItem
    text="Понятная и простая реализация партнерстваих"
    icon={<Like style={{ fill: '#00B956' }} />}
  />
</TextWithIcon>