PromoCards

import { PromoCards } 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' },
              }
          ]}
      />

Количество карточек больше 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: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
                  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
          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
          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' }
              }
          ]}
      />

Prop name	Type	Description
items*	IPromoCardData[]	Список карточек. Минимальное количество 2 карточки
carouselNavTheme	NavThemeType	Тема навигации для карусели
carouselGradientColor	GradientThemeType	Цвет градиента для карусели
className	string	Дополнительный css класс для корневого элемента
classes	{ root?: string; card?: string; }	Дополнительные css классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; card?: Record<string, string>; }	Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement>	Ссылка на элемент
background	"gray" \| "white" \| "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;
};

interface IPromoCardData {
    title: string;
    subtitle?: string;
    link: LinkType;
    image: ImageType;
    logo?: LogoType;
    badge?: React.ReactElement | null;
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
}