Figma

BenefitCards

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

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

Показать код

      <BenefitCards
          items={[
              {
                  imageSrc: gift.src,
                  title: 'Безлимит на МегаФон',
                  description: 'Звонки на <b>номера</b> МегаФона России не расходуют пакет минут.',
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый <b>пакеты</b> сохраняются и накапливаются',
              },
          ]}
      />

Карточка-ссылка

Показать код

      <BenefitCards
          items={[
              {
                  imageSrc: gift.src,
                  title: 'Безлимит на МегаФон',
                  description: 'Звонки на номера МегаФона России не расходуют пакет минут.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Псевдо ссылка' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Псевдо ссылка' },
              },
          ]}
      />

Основные цвета

Показать код

      <BenefitCards
          mainBackground="gray"
          items={[
              {
                  imageSrc: gift.src,
                  title: 'Безлимит на МегаФон',
                  description: 'Звонки на номера МегаФона России не расходуют пакет минут.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="white"
          items={[
              {
                  imageSrc: gift.src,
                  title: 'Безлимит на МегаФон',
                  description: 'Звонки на номера МегаФона России не расходуют пакет минут',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'МегаСилы',
                  description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
       />
Показать код

      <BenefitCards
          mainBackground="outline"
          items={[
              {
                  imageSrc: gift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-purple"
          items={[
              {
                  imageSrc: purpleGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: purpleGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-green"
          items={[
              {
                  imageSrc: greenGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: greenGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-night"
          items={[
              {
                  imageSrc: nightGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: nightGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-sky"
          items={[
              {
                  imageSrc: skyGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: skyGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-flamingo"
          items={[
              {
                  imageSrc: flamingoGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: flamingoGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="soft-berry"
          items={[
              {
                  imageSrc: berryGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: berryGift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />

Дополнительные цвета

Применяются к определённым плиткам автоматически в зависимости от количества плиток

Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-purple"
          items={[
              {
                  imageSrc: purpleGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-green"
          items={[
              {
                  imageSrc: greenGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-night"
          items={[
              {
                  imageSrc: nightGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-sky"
          items={[
              {
                  imageSrc: skyGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-flamingo"
          items={[
              {
                  imageSrc: flamingoGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="soft-berry"
          items={[
              {
                  imageSrc: berryGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="gradient-berry1"
          items={[
              {
                  imageSrc: whiteGift.src,
                  title: 'Кешбэк 10%',
                  description: 'Возвращайте 10% абонентской платы и оплачивайте до 50% стоимости услуг.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="outline"
          extraBackground="gradient-berry2"
          items={[
              {
                  imageSrc: whiteGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'МегаСилы',
                  description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="gradient-purple1"
          items={[
              {
                  imageSrc: whiteGift.src,
                  title: 'Связь при нуле',
                  description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'МегаСилы',
                  description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
          ]}
      />
Показать код

       <BenefitCards
           mainBackground="gray"
           extraBackground="gradient-purple3"
           items={[
               {
                   imageSrc: whiteGift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
                   link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
                   link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
               },
              {
                  imageSrc: gift.src,
                  title: 'Копилка минут и ГБ',
                  description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
                  link: { href: '#', target: '_blank', pseudoLinkText: 'Подробнее' },
              },
           ]}
       />

Компановка

2 карточки

Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="gradient-berry2"
          items={[
               {
                   imageSrc: whiteGift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
          ]}
      />

3 карточки

Показать код

      <BenefitCards
          mainBackground="gray"
          extraBackground="gradient-berry2"
          items={[
               {
                   imageSrc: whiteGift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
          ]}
      />

4 карточки

Показать код

      <BenefitCards
          mainBackground="outline"
          extraBackground="soft-night"
          items={[
               {
                   imageSrc: nightGift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
               {
                   imageSrc: nightGift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
          ]}
      />

5 карточек

Показать код

      <BenefitCards
          mainBackground="white"
          extraBackground="gradient-berry1"
          items={[
               {
                   imageSrc: whiteGift.src,
                   title: 'Безлимит на МегаФон',
                   description: 'Звонки на номера МегаФона России не расходуют пакет минут',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
               {
                   imageSrc: gift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
               },
               {
                   imageSrc: gift.src,
                   title: 'Копилка минут и ГБ',
                   description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
               },
               {
                   imageSrc: whiteGift.src,
                   title: 'Кешбэк 10%',
                   description: 'Возвращайте 10% абонентской платы и оплачивайте до 50% стоимости услуг.',
               },
          ]}
      />

6 карточек

Показать код

      <BenefitCards
          mainBackground="outline"
          extraBackground="soft-berry"
          items={[
               {
                   imageSrc: berryGift.src,
                   title: 'Безлимит на МегаФон',
                   description: 'Звонки на номера МегаФона России не расходуют пакет минут',
               },
               {
                   imageSrc: gift.src,
                   title: 'МегаСилы',
                   description: 'Безлимитный интернет и опции с неограниченными возможностями для бизнеса',
               },
               {
                   imageSrc: berryGift.src,
                   title: 'Связь при нуле',
                   description: 'При отрицательном балансе абоненту будут доступны услуги, входящие в тариф.',
               },
               {
                   imageSrc: gift.src,
                   title: 'Копилка минут и ГБ',
                   description: 'Неизрасходованные за прошлый пакеты сохраняются и накапливаются',
               },
               {
                   imageSrc: berryGift.src,
                   title: 'Кешбэк 10%',
                   description: 'Возвращайте 10% абонентской платы и оплачивайте до 50% стоимости услуг.',
               },
               {
                   imageSrc: gift.src,
                   title: 'Кешбэк 10%',
                   description: 'Возвращайте 10% абонентской платы и оплачивайте до 50% стоимости услуг.',
               },
          ]}
      />
Prop nameTypeDefaultDescription
items*IBenefitCardData[]Список карточек
mainBackgroundMainBackgroundType | undefinedОсновной фон карточек
extraBackgroundExtraBackgroundType | undefinedДополнительный фон карточек
classNamestring | undefinedДополнительный класс для компонента
classes{ root?: string | undefined; card?: string | undefined; } | undefinedДополнительные классы для внутренних элементов
dataAttrs{ root?: Record<string, string> | undefined; card?: Record<string, string> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам
rootRefRef<HTMLDivElement> | undefinedСсылка на корневой элемент
type SoftBackgroundType = 'soft-purple' | 'soft-green' | 'soft-night' | 'soft-sky' | 'soft-flamingo' | 'soft-berry';


export type MainBackgroundType = SoftBackgroundType | 'outline' | 'white' | 'gray';


export type ExtraBackgroundType =
    | SoftBackgroundType
    | 'gradient-berry1'
    | 'gradient-berry2'
    | 'gradient-purple1'
    | 'gradient-purple2'
    | 'gradient-purple3';


export type LinkType = {
    /** Атрибут ссылки href */
    href: string;
    /** Атрибут ссылки target */
    target: '_self' | '_blank';
    /** Атрибут ссылки rel */
    rel?: string;
    /** Текст псевдоссылки внутри карточки */
    pseudoLinkText: string;
};


export interface IBenefitCardData {
    /** Заголовок */
    title: string;
    /** Описание */
    description: string;
    /** Изображение */
    imageSrc: string;
    /** Ссылка */
    link?: LinkType;
}