InfoCards

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

Примеры и код

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

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

    
      <InfoCards
          items={[
              {
                  title: 'Контроль персонала',
                  description: 'Мгновенные оповещения об отсутствии сотрудника на рабочем месте ',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
          ]}
      />

Без текста


      <InfoCards
          items={[
              {
                  title: 'Контроль персонала',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
              {
                  title: 'Управление трафиком',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
          ]}
      />

Без заголовка


      <InfoCards
          items={[
              {
                  description: 'Мгновенные оповещения об отсутствии сотрудника на рабочем месте ',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
              {
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
          ]}
      />

Дополнительная информация


      <InfoCards
          items={[
              {
                  title: 'Контроль персонала',
                  description: 'Мгновенные оповещения об отсутствии сотрудника на рабочем месте ',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  moreInfo: 'от 4 500 ₽/мес'
              },
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  moreInfo: 'от 3 500 ₽/мес'
              },
          ]}
      />

Ссылка


      <InfoCards
          imgPosition="right-side"
          items={[
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  href: '#',
                  moreInfo: 'Подробнее',
                  target: '_blank',
                  rel: 'noFollow',
              },
              {
                  title: 'Управление трафиком',
                  description: 'Мгновенные оповещения об отсутствии сотрудника на рабочем месте ',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  href: '#',
              },
          ]}
      />
      <InfoCards
          imgPosition="top-left"
          items={[
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  href: '#',
                  moreInfo: 'Подробнее',
                  target: '_blank',
                  rel: 'noFollow',
              },
              {
                  title: 'Управление трафиком',
                  description: 'Мгновенные оповещения об отсутствии сотрудника на рабочем месте ',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  href: '#',
              },
          ]}
      />

Размер


      <InfoCards size="small" items={twoItems} />
      <InfoCards size="medium" items={twoItems} />
      <InfoCards size="big" items={twoItems} />

Расположение картинки

Смена расположения картинки допустима только для размеров medium и small, для размера big параметр imgPosition будет проигнорирован, и картинка всегда будет справа на десктопных разрешениях и сверху на мобильных


      <InfoCards imgPosition="right-side" items={twoItems} />
      <InfoCards imgPosition="top-left" items={twoItems} />

Фон

Значение no допустимо только для карточек с размером medium или small и с позицией картинки top-left, для всех остальных размеров карточки и позиций картинки значение no будет проигнорировано и заменено на значение stroke


      <InfoCards size="small" background="no" items={twoItems} />
      <InfoCards size="small" background="gray" items={twoItems} />
      <InfoCards size="small" background="white" items={twoItems} />
      <InfoCards size="small" background="purple" items={twoItems} />
      <InfoCards size="small" background="green" items={twoItems} />
      <InfoCards size="small" background="gray" items={twoItems} />
      <InfoCards size="small" background="stroke" items={twoItems} />
      <InfoCards size="small" background="shadow" items={twoItems} />

Сетка

Количество колонок на разных разрешениях вычисляется автоматически и зависит от размера карточки и позиции картинки

Размер small и иконка сверху


      <InfoCards imgPosition="top-left" size="small" items={twoItems} />
      <InfoCards imgPosition="top-left" size="small" items={threeItems} />
      <InfoCards imgPosition="top-left" size="small" items={fourItems} />
      <InfoCards imgPosition="top-left" size="small" items={fiveItems} />
      <InfoCards imgPosition="top-left" size="small" items={sixItems} />

Размер small и иконка справа


      <InfoCards imgPosition="right-side" size="small" items={twoItems} />
      <InfoCards imgPosition="right-side" size="small" items={threeItems} />
      <InfoCards imgPosition="right-side" size="small" items={fourItems} />
      <InfoCards imgPosition="right-side" size="small" items={fiveItems} />
      <InfoCards imgPosition="right-side" size="small" items={sixItems} />

Размер medium и иконка сверху


      <InfoCards imgPosition="top-left" size="medium" items={twoItems} />
      <InfoCards imgPosition="top-left" size="medium" items={threeItems} />
      <InfoCards imgPosition="top-left" size="medium" items={fourItems} />
      <InfoCards imgPosition="top-left" size="medium" items={fiveItems} />
      <InfoCards imgPosition="top-left" size="medium" items={sixItems} />

Размер medium и иконка справа


      <InfoCards imgPosition="right-side" size="medium" items={twoItems} />
      <InfoCards imgPosition="right-side" size="medium" items={threeItems} />
      <InfoCards imgPosition="right-side" size="medium" items={fourItems} />
      <InfoCards imgPosition="right-side" size="medium" items={fiveItems} />
      <InfoCards imgPosition="right-side" size="medium" items={sixItems} />

Размер big


      <InfoCards size="big" items={twoItems} />
      <InfoCards size="big" items={threeItems} />
      <InfoCards size="big" items={fourItems} />
      <InfoCards size="big" items={fiveItems} />
      <InfoCards size="big" items={sixItems} />

Особенности расположения контента для карточек, у которых картинка расположена справа и нет дополнительной информации


      <InfoCards
          size="big"
          items={[
              {
                  title: 'Контроль персонала',
                  description: 'Мгновенные оповещения',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  moreInfo: 'от 3 500 ₽/мес'
              },
          ]}
      />
      <InfoCards
          size="medium"
          imgPosition="right-side"
          items={[
              {
                  title: 'Контроль персонала',
                  description: 'Мгновенные оповещения',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
              },
              {
                  title: 'Управление трафиком',
                  description: 'Определение длины очереди, подсчёт посетителей, в том числе уникальных',
                  imgSrc: folderImg.src,
                  imgAlt: 'folder',
                  moreInfo: 'от 3 500 ₽/мес'
              },
          ]}
      />

Prop name	Type	Default	Description
className	string		Дополнительный css класс для корневого элемента
classes	{ root?: string; card?: string; cardTitle?: string; }		Дополнительные css классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; card?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
items*	IInfoCardData[]		Список карточек
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
size	"big" \| "medium" \| "small"	medium	Размер карточки
imgPosition	"right-side" \| "top-left"	top-left	Расположение изображения
background	"shadow" \| "stroke" \| "gray" \| "green" \| "purple" \| "white" \| "no"	stroke	Фон карточки

export interface IInfoCardData {
    /** Заголовок */
    title?: string;
    /** Текст */
    description?: string;
    /** URL изображения */
    imgSrc: string;
    /** Атрибут alt изображения */
    imgAlt?: string;
    /** URL ссылки */
    href?: string;
    /** Атрибут target ссылки */
    target?: '_self' | '_blank';
    /** Атрибут rel ссылки */
    rel?: string;
    /** Добавление атрибута download для ссылки */
    download?: boolean;
    /** Дополнительная информация */
    moreInfo?: string;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
}