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' }
              }
          ]}
      />