Figma

PromoCards

import { PromoCards, PromoCard } from '@megafon/ui-shared';
Примеры и код
Свойства и методы

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

Минимальное количество 2 карточки


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              }
          ]}
      />
  


      <PromoCards>
          <PromoCard
              title="Абонемент на связь"
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
          />
          <PromoCard
              title="Абонемент на связь"
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
          />
      </PromoCards>

Количество карточек больше 3


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              }
          ]}
      />

Подзаголовок


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              }
          ]}
      />

Маркированный список


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  list: ['<b>Хранения записей</b> в облаке и еще что-нибудь такое', 'Хранения записей в облаке'],
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  list: ['<b>Хранения записей</b> в облаке и еще что-нибудь такое', 'Хранения записей в облаке'],
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
              }
          ]}
      />

Бейдж

Любой бейдж


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  badge: <PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  badge: <PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>
              }
          ]}
      />
  


      <PromoCards>
          <PromoCard
              title="Абонемент на связь"
              subtitle='Скидка на абонентскую плату при оплате на несколько месяцев вперёд'
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              badge={<PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>}
          />
          <PromoCard
              title="Абонемент на связь"
              subtitle='Скидка на абонентскую плату'
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              badge={<PromoBadge color="brand-purple">Безлимитные звонки</PromoBadge>}
          />
      </PromoCards>

PromoBadge через свойства


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  promoBadge: { text: 'Безлимитные звонки', color: 'night' },
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  promoBadge: { text: 'Безлимитные звонки', color: 'gradient-purple' },
              }
          ]}
      />

PriceBadge через свойства


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  priceBadge: { text: 'Безлимитные звонки' },
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  priceBadge: { text: 'Безлимитные звонки',  iconType: 'check', theme: 'orange' },
              }
          ]}
      />

Логотип

Логотип и бейдж не могут быть включены одновременно


      <PromoCards
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              }
          ]}
      />
  


      <PromoCards>
          <PromoCard
              title="Абонемент на связь"
              subtitle='Скидка на абонентскую плату при оплате на несколько месяцев вперёд'
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              logo={{ src: logoSrc, alt: 'Logo Alt' }}
          />
          <PromoCard
              title="Абонемент на связь"
              subtitle='Скидка на абонентскую плату'
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              logo={{ src: logoSrc, alt: 'Logo Alt' }}
          />
      </PromoCards>

Фон карточки

Белый с тенью


      <PromoCards
          background="shadow"
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              }
          ]}
      />

Белый на сером фоне


      <div style={{ backgroundColor: 'var(--spbSky0)', padding: '40px 80px' }}>
          <PromoCards
              background="white"
              carouselGradientColor="spbSky0"
              items={[
                  {
                      title: 'Абонемент на связь',
                      subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                      link: { title: 'Подробнее', href: '/' },
                      image: { src: imageSrc, alt: 'Alt' },
                      logo: { src: logoSrc, alt: 'Logo Alt' }
                  },
                  {
                      title: 'Абонемент на связь',
                      subtitle: 'Скидка на абонентскую плату',
                      link: { title: 'Подробнее', href: '/' },
                      image: { src: imageSrc, alt: 'Alt' },
                      logo: { src: logoSrc, alt: 'Logo Alt' }
                  },
                                      {
                      title: 'Абонемент на связь',
                      subtitle: 'Скидка на абонентскую плату',
                      link: { title: 'Подробнее', href: '/' },
                      image: { src: imageSrc, alt: 'Alt' },
                      logo: { src: logoSrc, alt: 'Logo Alt' }
                  },
                                      {
                      title: 'Абонемент на связь',
                      subtitle: 'Скидка на абонентскую плату',
                      link: { title: 'Подробнее', href: '/' },
                      image: { src: imageSrc, alt: 'Alt' },
                      logo: { src: logoSrc, alt: 'Logo Alt' }
                  }
              ]}
          />
      </div>

Серый


      <PromoCards
          background="gray"
          items={[
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              },
              {
                  title: 'Абонемент на связь',
                  subtitle: 'Скидка на абонентскую плату',
                  link: { title: 'Подробнее', href: '/' },
                  image: { src: imageSrc, alt: 'Alt' },
                  logo: { src: logoSrc, alt: 'Logo Alt' }
              }
          ]}
      />

Рекламная метка


      <PromoCards>
          <PromoCard
              title="Абонемент на связь"
              subtitle="Скидка на абонентскую плату при оплате на несколько месяцев вперёд"
              adMark={{ title: '#реклама', tooltip: { children: 'Реклама ПАО «МегаФон» ИНН:&nbsp;7812014560; Erid: 2W5zFJdPNbA' } }}
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              logo={{ src: logoSrc, alt: 'Logo Alt' }}
          />
          <PromoCard
              title="Абонемент на связь"
              subtitle="Скидка на абонентскую плату"
              adMark={{ title: '#реклама', tooltip: { children: 'Реклама ПАО «МегаФон» ИНН:&nbsp;7812014560; Erid: 2W5zFJdPNbA' } }}
              link={{ title: 'Подробнее', href: '/' }}
              image={{ src: imageSrc }}
              logo={{ src: logoSrc, alt: 'Logo Alt' }}
          />
      </PromoCards>
Prop nameTypeDefaultDescription
itemsIPromoCardData[]Список карточек. Минимальное количество 2 карточки
carouselNavThemeNavThemeTypeТема навигации для карусели
carouselGradientColorGradientThemeTypeЦвет градиента для карусели
classNamestringДополнительный css класс для корневого элемента
classes{ root?: string; card?: string; }Дополнительные css классы для корневого и внутренних элементов
dataAttrs{ root?: Record<string, string>; card?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
rootRefRef<HTMLDivElement>Ссылка на элемент
childrenReactNodeДочерние элементы. Минимальное количество 2 элемента
background"gray" | "white" | "shadow"Фон карточки


PromoCard


Prop nameTypeDefaultDescription
classNamestringДополнительный css класс для корневого элемента
classes{ root?: string; }Дополнительные css классы для корневого элемента
dataAttrs{ root?: Record<string, string>; image?: Record<string, string>; badge?: Record<string, string>; logo?: Record<string, string>; subtitle?: Record<string, string>; list?: Record<...>; adTitle?: Record<...>; }Дополнительные data атрибуты к корневому и внутренним элементам
title*stringЗаголовок карточки
subtitlestringПодзаголовок карточки
liststring[][]Список карточки (может принимать тег b в пунктах)
link*LinkTypeПараметры для ссылки в карточке
image*ImageTypeПараметры для изображения в карточке
logoLogoTypeПараметры для логотипа в карточке
badgeReactElement<any, string | JSXElementConstructor<any>>Бейдж в карточке
promoBadgePromoBadgeTypenullПараметры для отображения компонента PromoBadge в карточке
priceBadgePriceBadgeTypenullПараметры для отображения компонента PriceBadge в карточке
adMarkAdMarkTypenullРекламная метка
onClick(e: SyntheticEvent<EventTarget, Event>) => voidОбработчик клика по карточке
background"gray" | "white" | "shadow"shadowФон карточки
type NavThemeType = 'light' |'green';


type GradientThemeType = 'default' | 'green' | 'black' | 'spbSky0' | 'spbSky1' | 'spbSky2';
type ImageType = {
    src: string;
    src2x?: string;
    alt?: string;
};


type LogoType = {
    src?: string;
    alt?: string;
};


type LinkType = {
    title: string;
    href: string;
    target?: '_self' | '_blank';
    rel?: string;
};


type PromoBadgeType = {
    text: string;
    color: IPromoBadgeProps['color'];
};


type PriceBadgeType = {
    text: string;
    iconType?: IPriceBadgeProps['iconType'];
    theme?: IPriceBadgeProps['theme'];
};


interface IPromoCardData {
    /** Заголовок карточки */
    title: string;
    /** Подзаголовок карточки */
    subtitle?: string;
    /** Список карточки (может принимать тег b в пунктах) */
    list?: string[];
    /** Параметры для ссылки в карточке */
    link: LinkType;
    /** Параметры для изображения в карточке */
    image: ImageType;
    /** Параметры для логотипа в карточке */
    logo?: LogoType;
    /** Бейдж в карточке */
    badge?: React.ReactElement | null;
    /** Параметры для отображения компонента PromoBadge в карточке */
    promoBadge?: PromoBadgeType | null;
    /** Параметры для отображения компонента PriceBadge в карточке */
    priceBadge?: PriceBadgeType | null;
    /** Рекламная метка */
    adMark?: AdMarkType | null;
    /** Обработчик клика по карточке */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
}
type AdMarkType = {
    /** Заголовок */
    title: string;
    /** Параметры тултипа (пропсы компонента Tooltip из ui-core) */
    tooltip: Omit<ITooltipProps, 'triggerElement'>;
};