BenefitsIcons

Демо данные
const items = [
    {
        title: 'Звонки',
        text: 'Оставайтесь всегда на связи',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
]

Контент

Заголовок с текстом

<BenefitsIcons items={twoItems} />

Только заголовок

<BenefitsIcons items={twoItemsWithoutText} iconPosition="left-side" />

Только текст

<BenefitsIcons items={twoItemsWithoutTitle} iconPosition="left-side" />

Столбец с выравниванием по левому краю

Значок с выравниванием по левому краю сверху

2 бенефита

<BenefitsIcons items={twoItems} iconPosition="left-top" />

3 бенефита

<BenefitsIcons items={threeItems} iconPosition="left-top" />

4 бенефита

<BenefitsIcons items={fourItems} iconPosition="left-top" />

5 бенефитов

<BenefitsIcons items={fiveItems} iconPosition="left-top" />

Значок с выравниванием по левому краю

2 бенефита

<BenefitsIcons items={twoItems} iconPosition="left-side" />

3 бенефита

<BenefitsIcons items={threeItems} iconPosition="left-side" />

4 бенефита

<BenefitsIcons items={fourItems} iconPosition="left-side" />

5 бенефитов

<BenefitsIcons items={fiveItems} iconPosition="left-side" />

Столбец с выравниванием по центру

Значок с выравниванием по центру сверху

2 бенефита

<BenefitsIcons items={twoItems} iconPosition="center-top" />

3 бенефита

<BenefitsIcons items={threeItems} iconPosition="center-top" />

4 бенефита

<BenefitsIcons items={fourItems} iconPosition="center-top" />

5 бенефитов

<BenefitsIcons items={fiveItems} iconPosition="center-top" />

В одной колонке

Значок с выравниванием по левому краю

<BenefitsIcons inOneColumn iconPosition="left-side" items={fiveItems} />

Значок с выравниванием по левому краю сверху

<BenefitsIcons inOneColumn items={fiveItems} />

Значок с выравниванием по центру

<BenefitsIcons inOneColumn iconPosition="center-top" items={fiveItems} />

Только текст

<BenefitsIcons
  inOneColumn
  iconPosition="left-side"
  items={threeItemsWithoutTitle}
/>

Только заголовок

<BenefitsIcons
  inOneColumn
  iconPosition="left-side"
  items={threeItemsWithoutText}
/>

С заголовком

<Container>
  <TitleDescriptionBox title="Возможные услуги" />
  <BenefitsIcons items={twoItems} iconPosition="left-top" />
</Container>

Входящие пропсы

const twoItemsWithoutText = [
    {
        title: 'Звонки',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
    {
        title: 'Интернет',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
];
const twoItemsWithoutTitle = [
    {
        text: 'Оставайтесь всегда на связи',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
    {
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
];
const twoItems = [
    {
        title: 'Звонки',
        text: 'Оставайтесь всегда на связи',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block', fill: '#00B956' }} />,
    },
];