ServiceCards

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

Примеры и код

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

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

Компонент по дизайну рассчитан только на 5 карточек


      <ServiceCards
          items={[
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageBig.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              }
          ]}
      />

Серый цвет плиток

Показать код


      <ServiceCards
          background="gray"
          items={[
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageBig.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              }
          ]}
      />

Белый цвет плиток на сером фоне

Показать код


      <ServiceCards
          background="white"
          items={[
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageBig.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              },
              {
                  "title": "Видеонаблюдение",
                  "subtitle": "Мониторинг сотрудников, обеспечение безопасности бизнеса",
                  "value": "от 399 ₽/мес",
                  "href": "/corporate",
                  "target": "_blank",
                  "noFollow": true,
                  "imageSrc": imageSmall.src
              }
          ]}
      />

Prop name	Type	Description
background	BackgroundType \| undefined	Цвет фона плиток
items*	[ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType]	Список плиток
className	string \| undefined	Дополнительный класс для компонента
classes	{ root?: string \| undefined; card?: string \| undefined; cardTitle?: string \| undefined; } \| undefined	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; card?: Record<string, string> \| undefined; cardTitle?: Record<string, string> \| undefined; } \| undefined	Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined	Ссылка на корневой элемент

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

export type ServiceCardDataType = {
    /** Заголовок */
    title: string | React.ReactNode | ReactNode[];
    /** Подзаголовок */
    subtitle?: string | React.ReactNode | ReactNode[];
    /** Значение */
    value: string;
    /** Изображение */
    imageSrc: string;
    /** Изображение 2x */
    imageSrc2x?: string;
    /** Значение тега alt для изображения */
    imageAlt?: string;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика по кнопке */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};

type BackgroundType = 'white' | 'gray' | 'shadow';