Card

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

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

Демо данныеconst title = 'Cмартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь';
const text = 'Сдайте старое оборудование в трейд‑ин и получите дополнительную скидку до 3000 ₽ на смартфоны Huawei и до 1000 ₽ на связь в подарок.';
const button = {
    title: 'Подробнее',
    href: '#',
    target: '_self',
};
const buttonWithClick = {
    title: 'Подключить',
    // eslint-disable-next-line no-alert
    onClick: (): void => alert('Выполнено действие при клике на кнопку'),
};
const buttonWithLongTitle = {
    title: 'Очень длинный заголовок',
    href: '#',
    target: '_blank',
};
const fakeLink = {
    title: 'Подключить',
};
const link = {
    title: 'Подключить',
    href: '#',
};
const img = './img.png';
const svg = <WiFi style={{ display: 'block', fill: '#00B956' }} />;

Кнопка с обработчиком клика

Если в проп button передать обработчик onClick, он будет вызван при клике на кнопку.

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Сдайте старое оборудование в трейд‑ин и получите дополнительную скидку до 3000 ₽ на смартфоны Huawei и до 1000 ₽ на связь в подарок.

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card title={title} text={text} button={buttonWithClick} />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card title={title} text={text} button={buttonWithClick} />
  </GridColumn>
</Grid>

Изображение

Если в карточке заданы изображение и иконка, то иконка будет проигнорирована.

С картинкой

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

С иконкой

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Без изображения

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С картинкой
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      imageSrc={img}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С иконкой
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Без изображения
    </Header>
    <Card title={title} text={text} button={button} link={link} />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С картинкой
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      imageSrc={img}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С иконкой
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Без изображения
    </Header>
    <Card title={title} text={text} button={button} link={link} />
  </GridColumn>
</Grid>

Заполнение контейнера

Изображение заполняет контейнер по ширине

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подключить

Изображение вписывается в контейнер

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Изображение заполняет контейнер по ширине
    </Header>
    <Card title={title} text={text} link={link} imageSrc={img} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Изображение вписывается в контейнер
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      imageSrc={imgShort}
      objectFit="contain"
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Изображение заполняет контейнер по ширине
    </Header>
    <Card title={title} text={text} link={link} imageSrc={img} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Изображение вписывается в контейнер
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      imageSrc={imgShort}
      objectFit="contain"
    />
  </GridColumn>
</Grid>

Кнопка и ссылка

Если в компонент не добавлены кнопка и ссылка, то в параметрах самой карточки должна быть указана ссылка. В таком случае карточка становится кликабельной и имеет hover состояние. Чтобы обозначить такое поведение карточки, в неё можно добавить "ложную ссылку" (надпись синего цвета).

Кнопка и ссылка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Только кнопка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Только ссылка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подключить

С "ложной ссылкой"

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подключить

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Кнопка и ссылка
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Только кнопка{' '}
    </Header>
    <Card title={title} text={text} button={button} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Только ссылка
    </Header>
    <Card title={title} text={text} link={link} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С "ложной ссылкой"
    </Header>
    <Card title={title} text={text} link={fakeLink} svgSrc={svg} href="#" />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Кнопка и ссылка
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Только кнопка{' '}
    </Header>
    <Card title={title} text={text} button={button} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Только ссылка
    </Header>
    <Card title={title} text={text} link={link} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      С "ложной ссылкой"
    </Header>
    <Card title={title} text={text} link={fakeLink} svgSrc={svg} href="#" />
  </GridColumn>
</Grid>

Позиционирование

Позиционирование по левому краю применимо, если в карточке находится либо одна кнопка, либо одна ссылка. Если в карточке находится и кнопка, и ссылка, то они располагаются всегда по центру.

По левому краю

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

По центру

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Всегда по центру

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Перенос элементов

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Очень длинный заголовок

Подключить

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      По левому краю
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      svgSrc={svg}
      isLeftHAlign
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      По центру
    </Header>
    <Card title={title} text={text} button={button} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Всегда по центру
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Перенос элементов
    </Header>
    <Card
      title={title}
      text={text}
      button={buttonWithLongTitle}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      По левому краю
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      svgSrc={svg}
      isLeftHAlign
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      По центру
    </Header>
    <Card title={title} text={text} button={button} svgSrc={svg} />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Всегда по центру
    </Header>
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Header as="h2" align="center" margin>
      Перенос элементов
    </Header>
    <Card
      title={title}
      text={text}
      button={buttonWithLongTitle}
      link={link}
      svgSrc={svg}
    />
  </GridColumn>
</Grid>

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

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      imageSrc={img}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      imageSrc={img}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      svgSrc={svg}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
</Grid>

Выравнивание текста

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Подробнее

Подключить

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={false}
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={true}
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={false}
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={true}
      title={title}
      text={text}
      button={button}
      link={link}
      isFullHeight
    />
  </GridColumn>
</Grid>

Карточка в виде ссылки

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={false}
      title={title}
      text={text}
      href="#"
      target="_self"
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={true}
      title={title}
      text={text}
      href="#"
      target="_blank"
      isFullHeight
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={false}
      title={title}
      text={text}
      href="#"
      target="_self"
      isFullHeight
    />
  </GridColumn>
  <GridColumn all="3" mobile="12">
    <Card
      isCenteredText={true}
      title={title}
      text={text}
      href="#"
      target="_blank"
      isFullHeight
    />
  </GridColumn>
</Grid>

HTML-теги и спецсимволы

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.

Демо данныеconst htmlTitle = 'Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>';
const htmlText = 'Сдайте старое<br>оборудование в <font color="#731982">трейд‑ин</font> и получите <b>дополнительную</b> скидку до 3000&nbsp₽ на <a href="https://moscow.megafon.ru">смартфоны Huawei</a> и до 1000 ₽ на связь в подарок.';

Скачивайте мобильное приложение МегаФон
по ссылке

Сдайте старое
оборудование в трейд‑ин и получите дополнительную скидку до 3000 ₽ на смартфоны Huawei и до 1000 ₽ на связь в подарок.

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="12" mobile="12">
    <Card
      isCenteredText={false}
      title={htmlTitle}
      text={htmlText}
      href="#"
      target="_self"
      isFullHeight
    />
  </GridColumn>
</Grid>

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="12" mobile="12">
    <Card
      isCenteredText={false}
      title={htmlTitle}
      text={htmlText}
      href="#"
      target="_self"
      isFullHeight
    />
  </GridColumn>
</Grid>

Card

Кнопка с обработчиком клика

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Изображение

С картинкой

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

С иконкой

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Без изображения

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Заполнение контейнера

Изображение заполняет контейнер по ширине

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Изображение вписывается в контейнер

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Кнопка и ссылка

Кнопка и ссылка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Только кнопка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Только ссылка

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

С "ложной ссылкой"

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Позиционирование

По левому краю

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

По центру

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Всегда по центру

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Перенос элементов

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

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

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Выравнивание текста

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Карточка в виде ссылки

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

Смартфоны Huawei с дополнительной скидкой до 3000 ₽ и подарок — до 1000 ₽ на связь

HTML-теги и спецсимволы

Скачивайте мобильное приложение МегаФонпо ссылке

Скачивайте мобильное приложение МегаФон
по ссылке