BenefitsPictures

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

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

Демо данныеconst items = [
    {
        title: 'Интернет',
        text: 'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
        img: image.png,
    },
    {
        title: 'Интернет',
        text: 'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
        img: image.png,
    },
];

Выравнивание по левому краю

Большое расстояние между бенефитами

<BenefitsPictures items={twoItems} />

<BenefitsPictures items={threeItems} />

<BenefitsPictures items={fourItems} />

Среднее расстояние между бенефитами

<BenefitsPictures gridGap="medium" items={twoItems} />

<BenefitsPictures gridGap="medium" items={threeItems} />

<BenefitsPictures gridGap="medium" items={fourItems} />

Выравнивание по центру

Большое расстояние между бенефитами

<BenefitsPictures align="center" items={twoItems} />

<BenefitsPictures align="center" items={threeItems} />

<BenefitsPictures align="center" items={fourItems} />

Среднее расстояние между бенефитами

<BenefitsPictures gridGap="medium" align="center" items={twoItems} />

<BenefitsPictures gridGap="medium" align="center" items={threeItems} />

<BenefitsPictures gridGap="medium" align="center" items={fourItems} />

Выравнивание текста по левому краю независимо от выравнивания бенефитов

<BenefitsPictures align="center" textAlign="left" items={twoItems} />

Выравнивание текста по центру независимо от выравнивания бенефитов

<BenefitsPictures align="left" textAlign="center" items={twoItems} />

Выравнивание изображения по левому краю независимо от выравнивания бенефитов

<BenefitsPictures align="center" imgAlign="left" items={twoItemsWithSmallImg} />

Выравнивание изображения по центру независимо от выравнивания бенефитов

<BenefitsPictures align="left" imgAlign="center" items={twoItemsWithSmallImg} />

Без заголовка

<BenefitsPictures items={twoItemsWithoutTitle} />

Без текста

<BenefitsPictures items={twoItemsWithoutText} />