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