BenefitsIcons

Демо данные
export const fiveItems = [
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

export const fourItems = [
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

export const threeItems = [
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

export const threeItemsWithoutTitle = [
    {
        text: 'Оставайтесь всегда на связи',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        text: 'Оставайтесь всегда на связи',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

export const threeItemsWithoutText = [
    {
        title: 'Интернет',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интенет',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

export const threeItemsWithImage = [
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: imageSrc,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: imageSrc,
    },
    {
        title: 'Интернет',
        text: 'Подключите, и гигабайты и минуты всегда будут с вами!',
        icon: imageSrc,
    },
];

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

export const twoItemsWithoutText = [
    {
        title: 'Звонки',
        icon: <WiFi style={{ display: 'block' }} />,
    },
    {
        title: 'Интернет',
        icon: <WiFi style={{ display: 'block' }} />,
    },
];

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

Контент

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

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

Иконка в виде изображения

<BenefitsIcons
  items={threeItemsWithImage}
  iconPosition="center-top"
/>
<BenefitsIcons
  items={threeItemsWithImage}
  iconPosition="left-top"
/>
<BenefitsIcons
  items={threeItemsWithImage}
  iconPosition="left-side"
/>

Цвет фона

<BenefitsIcons
  items={fourItems}
  iconPosition="left-top"
  background="gray"
/>
<BenefitsIcons
  items={fourItems}
  iconPosition="left-top"
  background="green"
/>
<BenefitsIcons
  items={fourItems}
  iconPosition="left-top"
  background="purple"
/>