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>

Кнопки

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
      <Card
          title={{ text: 'Сеть стоматологий' }}
          button={{ title: 'Заказать', href: '#', target: '_blank' }}
          extraButton={{ title: 'Подробнее', href: '#' }}
      />
  </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="reflex-blue">Акция</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, 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>