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 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' }} />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
    <Card title={{ text: 'Сеть стоматологий', align: 'center' }} />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="4" tablet="6" mobile="12">
    <Card title={{ text: 'Сеть стоматологий', align: 'left' }} />
  </GridColumn>
  <GridColumn all="4" tablet="6" mobile="12">
    <Card title={{ text: 'Сеть стоматологий', align: 'center' }} />
  </GridColumn>
</Grid>

Контент

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

Сеть стоматологий

Задача:

Привлечь новых клиентов под акцию «установка импланта под ключ с коронкой».

Решение:

Подобрали лиды по гео
Взяли текущую базу клиента и выполнили обзвон роботом

Сеть стоматологий

Матрица:
2 МП
Угол обзора:
146,5°
ИК‑подсветка:
до 20 м

Купольная камера для применения внутри помещений и на улице

Сеть стоматологий

Бесплатный просмотр видео с опциями:

10 клипов доступно к выгрузке в месяц

10 клипов одновременно хранятся на сервере

30 неудаляемых закладок одновременно хранятся на сервере

10 клипов одновременно хранятся на сервере

10 клипов доступно к выгрузке в месяц

<Grid guttersLeft="medium" guttersBottom="medium">
  <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: 'Сеть стоматологий' }} 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: 'Сеть стоматологий', 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: 'Сеть стоматологий' }}
      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' }}
      icon={<WiFi fill="#00B956" />}
      textsList={textsList}
      price={{ value: '340 ₽', period: 'в месяц' }}
    />
  </GridColumn>
</Grid>

Изображение

Сеть стоматологий

Задача:

Привлечь новых клиентов под акцию «установка импланта под ключ с коронкой».

Решение:

Подобрали лиды по гео
Взяли текущую базу клиента и выполнили обзвон роботом

Сеть стоматологий

Матрица:
2 МП
Угол обзора:
146,5°
ИК‑подсветка:
до 20 м

Купольная камера для применения внутри помещений и на улице

Сеть стоматологий

Бесплатный просмотр видео с опциями:

10 клипов доступно к выгрузке в месяц

10 клипов одновременно хранятся на сервере

30 неудаляемых закладок одновременно хранятся на сервере

10 клипов одновременно хранятся на сервере

10 клипов доступно к выгрузке в месяц

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

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

Карточка может быть ссылкой, только если передан 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, 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, alt: 'Сеть стоматологий' }}
      textsList={textsList}
      price={{ value: '340 ₽', period: 'в месяц' }}
    />
  </GridColumn>
</Grid>

<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, 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, alt: 'Сеть стоматологий' }}
      textsList={textsList}
      price={{ value: '340 ₽', period: 'в месяц' }}
    />
  </GridColumn>
</Grid>

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

Сеть стоматологий

Задача:

Привлечь новых клиентов под акцию «установка импланта под ключ с коронкой».

Решение:

Подобрали лиды по гео
Взяли текущую базу клиента и выполнили обзвон роботом

Сеть стоматологий

Матрица:
2 МП
Угол обзора:
146,5°
ИК‑подсветка:
до 20 м

Купольная камера для применения внутри помещений и на улице

Сеть стоматологий

Бесплатный просмотр видео с опциями:

10 клипов доступно к выгрузке в месяц

10 клипов одновременно хранятся на сервере

30 неудаляемых закладок одновременно хранятся на сервере

10 клипов одновременно хранятся на сервере

10 клипов доступно к выгрузке в месяц

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

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