DarkGradientCards

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

Примеры и код

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

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

Минимальное количество отображаемых карточек в блоке — 3

<Container disablePaddingBottom >
      <DarkGradientCards
          items={[1, 2, 3].map((item, i) => ({
              imageSrc: i === 0 ? imageBig.src : imageSmall.src,
              title: "Title",
              subtitle: "Subtitle",
              moreIcon: <RecordingIcon />,
              moreText: "moreInfo",
              href: "#",
          }))}
      />
  </Container>

Если карточек больше 3, они выстраиваются в карусель

<Container>
      <TitleDescriptionBox
          title="Видеонаблюдение"
      />
      <DarkGradientCards
          items={[1, 2, 3, 4].map((item, i) => ({
              imageSrc: i === 0 ? imageBig.src : imageSmall.src,
              title: item + ". Склад и производство",
              subtitle: "Соблюдение стандартов на производстве, сохранение имущества, расследование инцидентов",
              moreIcon: <RecordingIcon />,
              moreText: "3 камеры внутри и 2 снаружи",
              href: "#",
          }))}
          carouselNavTheme="light"
          carouselGradientColor="default"
      />
  </Container>

Prop name	Type	Default	Description
items*	ItemType[]		Карточки. Минимальное количество 3 карточки
carouselNavTheme	NavThemeType	light	Тема навигации для карусели
carouselGradientColor	GradientThemeType	default	Цвет градиента для карусели
className	string		Дополнительный класс для компонента
classes	{ root?: string; item?: string; }	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string>; carousel?: Record<string, string>; item?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам

type NavThemeType = 'light' |'green';
type GradientThemeType = 'default' | 'green' | 'black' | 'spbSky0' | 'spbSky1' | 'spbSky2';

type ItemType = {
    /** Изображение */
    imageSrc: string;
    /** Заголовок */
    title: string;
    /** Подзаголовок */
    subtitle?: string;
    /** Иконка */
    moreIcon?: JSX.Element;
    /** Текст */
    moreText?: string;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
};

type TargetType = '_self' | '_blank' | '_parent' | '_top';