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 ₽/мес'
              },
          ]}
      />