Figma

Card

import Card from '@megafon/ui-shared';
Примеры и код
Свойства и методы
Демо данные
const featuresList = {
    items: [
        { title: 'Матрица:', value: '2 МП' },
        { title: 'Угол обзора:', value: '146,5°' },
        { title: 'ИК‑подсветка:', value: 'до 20 м' },
    ],
    desc: 'Купольная камера для применения внутри помещений и на улице',
};


const textsList = [
    {
        title: 'Задача:',
        desc: 'Привлечь новых клиентов под акцию «установка импланта под ключ с коронкой»',
    },
    {
        title: 'Решение:',
        desc: '<ol><li>Подобрали лиды по гео</li><li>Взяли текущую базу клиента и выполнили обзвон роботом</li></ol>',
    },
];


const markerList = [
    {
        title: 'Хранения записей в&nbsp;облаке',
        note: '30&nbsp;дней',
    },
    {
        title: 'Уведомления о&nbsp;движениях и&nbsp;звуках',
        note: 'Включено в&nbsp;тариф',
    },
    {
        title: 'Количество пользователей',
        note: 'Неограниченно',
    },
];


const iconsList = {
    items: [
        { icon: <WiFi />, text: '10 клипов доступно к выгрузке в месяц' },
        { icon: <WiFi />, text: '10 клипов одновременно хранятся на сервере' },
        { icon: <WiFi />, text: '30 неудаляемых закладок одновременно хранятся на сервере' },
    ],
    desc: 'Бесплатный просмотр видео с опциями:',
};

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

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
          <Card
              title={{ text: 'Сеть стоматологий', align: 'left' }}
              badge={<PromoBadge color="system-blue">Акция</PromoBadge>}
          />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card title={{ text: 'Сеть стоматологий', align: 'center' }} />
  </GridColumn>
</Grid>

Контент

Одновременно в карточке может выводиться только один из трех типов контента (textsList, featuresList, iconsList), остальные будут проигнорированы

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
          <Card title={{ text: 'Сеть стоматологий' }} markerList={markerList} badge={<PromoBadge color="137c">Акция</PromoBadge>} />
      </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card title={{ text: 'Сеть стоматологий' }} textsList={textsList} />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card title={{ text: 'Сеть стоматологий' }} featuresList={featuresList} />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card title={{ text: 'Сеть стоматологий' }} iconsList={iconsList} />
  </GridColumn>
</Grid>

Цена

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card title={{ text: 'Сеть стоматологий', align: 'center' }} price={{ value: '11% конверсия' }} />
  </GridColumn>
</Grid>

Кнопки

Если основной кнопке передан type outline, то дополнительная кнопка будет игнорировать переданный type, и отобразится с type text


  <Grid guttersLeft="medium" guttersBottom="medium">
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              title={{ text: 'Сеть стоматологий' }}
              button={{ title: 'Заказать', href: '#', target: '_blank', type: 'primary', theme: 'green' }}
              extraButton={{ title: 'Подробнее', href: '#', type: 'outline' }}
          />
      </GridColumn>
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              title={{ text: 'Сеть стоматологий' }}
              button={{ title: 'Заказать', href: '#', target: '_blank', type: 'primary', theme: 'green-soft' }}
              extraButton={{ title: 'Подробнее', href: '#', type: 'text' }}
          />
      </GridColumn>
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              title={{ text: 'Сеть стоматологий' }}
              button={{ title: 'Заказать', href: '#', target: '_blank', type: 'outline', theme: 'green' }}
              extraButton={{ title: 'Подробнее', href: '#', type: 'outline' }}
          />
      </GridColumn>
      <GridColumn all="4" tablet="6" mobile="12">
          <Card title={{ text: 'Сеть стоматологий' }} button={{ title: 'Заказать', href: '#', target: '_blank' }} />
      </GridColumn>
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              title={{ text: 'Сеть стоматологий' }}
              extraButton={{ title: 'Подробнее', href: '#', isCentered: true }}
          />
      </GridColumn>
  </Grid>

Иконка

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          icon={<WiFi fill="#00B956" />}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
</Grid>

Изображение

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          price={{ value: '340 ₽', period: 'в месяц' }}
          badge={<PromoBadge color="night">Акция</PromoBadge>}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий', position: 'bottom' }}
          featuresList={featuresList}
          price={{ value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий', position: 'bottom' }}
          iconsList={iconsList}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
</Grid>

Вид

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          view="shadow"
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          view="background"
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
</Grid>

Вид на сером фоне

<div style={{ backgroundColor: 'var(--spbSky0)', padding: '20px' }}>
  <Grid guttersLeft="medium" guttersBottom="medium">
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              view="hover-shadow"
              title={{ text: 'Сеть стоматологий', align: 'left' }}
              image={{ src: img.src, alt: 'Сеть стоматологий' }}
              textsList={textsList}
              price={{ value: '340 ₽', period: 'в месяц' }}
              button={{ title: 'Заказать', href: '#', target: '_blank', isCentered: true }}
              extraButton={{ title: 'Подробнее', href: '#' }}
          />
      </GridColumn>
  </Grid>
</div>

Карточка-ссылка

Карточка может быть ссылкой, только если передан href и отсутствуют кнопки. При наличии кнопок href будет проигнорирован.

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          link={{ href: '#', target: '_blank' }}
          view="shadow"
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          link={{ href: '#', target: '_blank' }}
          view="background"
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
      />
  </GridColumn>
</Grid>

Карточка-ссылка на сером фоне

<div style={{ backgroundColor: 'var(--spbSky0)', padding: '20px' }}>
  <Grid guttersLeft="medium" guttersBottom="medium">
      <GridColumn all="4" tablet="6" mobile="12">
          <Card
              link={{ href: '#', target: '_blank' }}
              view="hover-shadow"
              title={{ text: 'Сеть стоматологий', align: 'left' }}
              image={{ src: img.src, alt: 'Сеть стоматологий' }}
              textsList={textsList}
              price={{ value: '340 ₽', period: 'в месяц' }}
          />
      </GridColumn>
  </Grid>
</div>

Высота карточки 100%

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          isFullHeight
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий', position: 'bottom' }}
          textsList={textsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          isFullHeight
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий', position: 'bottom' }}
          featuresList={featuresList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          isFullHeight
          title={{ text: 'Сеть стоматологий', align: 'left' }}
          image={{ src: img.src, alt: 'Сеть стоматологий', position: 'bottom' }}
          iconsList={iconsList}
          price={{ value: '340 ₽', period: 'в месяц' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </GridColumn>
</Grid>
Prop nameTypeDefaultDescription
dataAttrs{ root?: Record<string, string>; icon?: Record<string, string>; imgBox?: Record<string, string>; button?: Record<string, string>; extraButton?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
classNamestringДополнительный класс для компонента
classes{ root?: string; button?: string; extraButton?: string; }Дополнительные классы для внутренних элементов
rootRefRef<HTMLDivElement | HTMLAnchorElement>Ссылка на корневой элемент
isFullHeightbooleanfalse
view"shadow" | "hover-shadow" | "background"shadowВид
linkLinkСсылка для карточки
imageImageИзображение
iconReactNodeИконка
title*TitleЗаголовок
markerListMarkerListМаркированный список
textsListTextsListСписок текстов
featuresListFeaturesListСписок характеристик
iconsListIconsListСписок иконок
pricePriceЦена
buttonMainButtonTypeКнопка
extraButtonExtraButtonTypeДополнительная кнопка
badgeReactElement<any, string | JSXElementConstructor<any>>Бейдж
onClick() => voidОбработчик клика по карточке
type Target = '_self' | '_blank' | '_parent' | '_top';




type Link = {
    /** Ссылка */
    href?: string;
    /** Target свойство ссылки */
    target?: Target;
};




type Image = {
    /** Ссылка на изображение */
    src: string;
    /** Значение тега alt для изображения */
    alt?: string;
    /** Позиция изображения */
    position?: 'top' | 'bottom';
};




type Title = {
    /** Текст */
    text: string;
    /** Выравнивание */
    align?: 'left' | 'center';
};




type MarkerList = {
    /** Заголовок */
    title: string;
    /** Примечание */
    note?: string;
}[];




type TextsList = {
    /** Заголовок */
    title?: string;
    /** Описание */
    desc: string;
}[];




type FeaturesList = {
    /** Список */
    items: {
        /** Заголовок */
        title: string;
        /** Значение */
        value: string;
    }[];
    /** Описание */
    desc?: string;
};




type IconsList = {
    /** Список */
    items: {
        /** Иконка */
        icon: React.ReactNode;
        /** Текст */
        text: string;
    }[];
    /** Описание */
    desc?: string;
};




type Price = {
    /** Старая цена */
    oldValue?: string;
    /** Текущая цена */
    value: string;
    /** Период */
    period?: string;
};




type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href?: string;
    /** Target свойство кнопки */
    target?: Target;
    /** Центрировать кнопку */
    isCentered?: boolean;
    /** Обработчик клика по кнопке */
    onClick?: () => void;
};




type MainButtonType = ButtonType & {
    /** Тип кнопки */
    type?: 'primary' | 'outline';
    /** Тема кнопки */
    theme?: 'green' | 'green-soft';
};




type ExtraButtonType = ButtonType & {
    /** Тип кнопки */
    type?: 'outline' | 'text';
};