@cloud-ru/ds-uikit-product-card-predefined

v3.1.3

Published

a day ago

Пресеты карточек Product UI Kit — CardBanner, CardService, CardServiceLight, CardServiceSmall, CardSuggest, CardCustom.

0High
0Medium
0Low

CardPredefined

@cloud-ru/ds-uikit-product-card-predefined — Пресеты карточек Product UI Kit — CardBanner, CardService, CardServiceLight, CardServiceInfo, CardServiceSmall, CardSuggest, CardCustom.

Набор готовых карточек Product UI Kit на базе @cloud-ru/ds-card:

Все компоненты поддерживают полиморфный as prop: as='a', as={Link} и т.д.

Установка

pnpm add @cloud-ru/ds-uikit-product-card-predefined

import { CardBanner, CardService, CardServiceLight, CardServiceInfo, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

CardBanner

Промо-баннер с заголовком, описанием, CTA-ссылкой и изображением. Поддерживает опциональную кнопку закрытия.

Когда использовать

Промо-блоки на главной или в каталоге сервисов.
Баннер с иллюстрацией и одним основным действием.

Примеры использования

Базовый пример

Иллюстрация 96×96 справа от текстового блока.

import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function Basic() {
  return (
    <CardBanner
      title='Заголовок карточки'
      content='Краткое описание сервиса или предложения для пользователя'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
    />
  );
}

Обработка клика

onClick передаётся в корневой Card — карточка интерактивна по умолчанию.

import { Typography } from '@cloud-ru/ds-typography';
import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardBanner
        title='Заголовок карточки'
        content='Клик по карточке обрабатывается через onClick'
        actionLabel='Подробнее'
        image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Закрываемый баннер

При передаче onClose в углу появляется кнопка закрытия; клик по ней не всплывает на карточку.

import { Typography } from '@cloud-ru/ds-typography';
import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function WithClose() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Typography variant='body' size='m'>
        Баннер закрыт
      </Typography>
    );
  }

  return (
    <CardBanner
      title='Заголовок карточки'
      content='Кнопка закрытия появляется при передаче onClose'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
      onClose={() => setVisible(false)}
    />
  );
}

Ссылка (polymorphic)

Через as и href карточка рендерится как якорь.

import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function PolymorphicLink() {
  return (
    <CardBanner
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Перейти на сайт'
      content='Откроется в новой вкладке'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
    />
  );
}

Props

CardBannerProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | actionLabel | string | — | Текст кнопки действия | | as | ElementType | — | Полиморфный элемент: 'div', 'a', {Link} и т.д. | | className | string | — | CSS-класс корневого элемента | | content | string | — | Описание | | data-test-id | string | — | Support prop для тестов | | disabled | boolean | — | Неактивное состояние | | image | { src: string; alt: string; } | — | Изображение | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | onClose | MouseEventHandler<HTMLElement> | — | Колбэк закрытия. При наличии отображается кнопка «Закрыть» | | title | string | — | Заголовок карточки |

CardService

Карточка сервиса с эмблемой, заголовком, описанием и CTA-строкой.

Когда использовать

Плитки сервисов в каталоге или дашборде.
Карточка с иконкой-эмблемой, заголовком и кратким описанием.

Props

CardServiceProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | actionLabel | string | — | Текст кнопки действия | | as | ElementType | — | Полиморфный элемент: 'div', 'a', {Link} и т.д. | | className | string | — | CSS-класс корневого элемента | | content | string | — | Описание | | data-test-id | string | — | Support prop для тестов | | disabled | boolean | — | Неактивное состояние | | emblem | ReactElement<any, string \| JSXElementConstructor<any>> | — | Эмблема — передавайте <IconPredefined icon={...} /> или произвольный ReactElement | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | title | string | — | Заголовок карточки |

CardServiceLight

Компактная интерактивная строка — иконка, текст, promo tag и кнопка «Избранное».

Компактная интерактивная строка: иконка + текст + promo tag + кнопка «Избранное» (ArrowRight/Left keyboard nav).

Когда использовать

Компактные списки сервисов в сайдбаре или меню.
Строка с иконкой, названием и кнопкой «Избранное».

Примеры использования

Базовый пример

Компактная строка с иконкой и заголовком.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} />;
}

Promo tag

Через promoTag рядом с заголовком отображается промо-бейдж.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} promoTag={{ variant: 'preview' }} />;
}

Обрезка заголовка

truncate.title ограничивает число строк заголовка через TruncateString.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинное название сервиса, которое не помещается в одну строку и обрезается через TruncateString';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 280 }}>
      <CardServiceLight title={longTitle} icon={<PlaceholderSVG size={24} />} truncate={{ title: 1 }} />
    </div>
  );
}

Кнопка «Избранное» (always)

actionsVisibility="always" — действия видны постоянно; favorite.checked и onChange задают controlled-режим избранного.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

Кнопка «Избранное» (hover)

actionsVisibility="hover" — действия появляются при наведении и фокусе на карточке.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{
        enabled: true,
      }}
    />
  );
}

Неактивное состояние

disabled блокирует взаимодействие с карточкой.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} disabled />;
}

Обработка клика

onClick вызывается при клике по карточке.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} onClick={() => setClicks(c => c + 1)} />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка (polymorphic)

Через as и href карточка рендерится как якорь.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceLight
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

Props

CardServiceLightProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | actionsVisibility | "always" | "hover" | 'hover' | Формат отображения дополнительных действий: всегда или при наведении и фокусе | | as | ElementType | — | Полиморфный элемент: 'button', 'a', {Link} и т.д. | | className | string | — | CSS-класс корневого элемента | | data-test-id | string | — | Support prop для тестов | | disabled | boolean | false | Неактивное состояние | | expandable | { value: boolean; onClick(): void; } | — | Настройки кнопки раскрытия | | favorite | FavoriteProps | — | Настройки кнопки «Избранное». Keyboard: ArrowRight на карточке → tooltip (если есть) → Favorite; ArrowLeft — в обратном порядке. | | icon | ReactElement<any, string \| JSXElementConstructor<any>> | — | Иконка сервиса | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | promoTag | CardPromoTagProps | PromoTagPredefinedBaseProps | — | Настройки promo tag. При отсутствии не отображается | | title | string | — | Заголовок карточки | | tooltip | TooltipProps | — | Подсказка с иконкой «?» рядом с заголовком | | truncate | { title?: number; } | — | Настройки обрезки текста заголовка |

Related types

CardPromoTagProps = PromoTagPredefinedProps & { as?: never; innerRef?: never; }

FavoriteProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean \| undefined | — | Состояние избранного (controlled) | | enabled | boolean | — | Включить отображение кнопки избранного | | onChange | ((value: boolean) => void) \| undefined | — | Колбэк изменения состояния избранного |

VisibilityStrategy = "always" | "hover"

Видимость действий

Проп карточки actionsVisibility ('hover' по умолчанию) управляет всеми действиями сразу — тултипом, избранным и кнопкой раскрытия.

Адаптивность

Desktop-first: раскладку берёт AdaptiveProvider. На mobile:

у внутреннего .container ставится data-mobile — min-height 40 вместо 32;
кнопки действий рендерятся с размером s вместо m.

Отдельного пропа раскладки нет; форс — toolbar-global layoutType / вложенный AdaptiveProvider / withLayoutType.

CardServiceInfo

Карточка сервиса с описанием — иконка, заголовок, описание, promo tag и кнопка «Избранное».

Карточка сервиса с описанием: иконка + заголовок + описание + promo tag + кнопка «Избранное». Подробный вариант рядом с CardServiceLight.

Когда использовать

Подробный режим списка сервисов (заголовок + описание).
Когда CardServiceLight слишком компактен и нужно показать description.

Примеры использования

Базовый пример

Карточка с иконкой, заголовком и описанием.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

Promo tag

Через promoTag рядом с заголовком отображается промо-бейдж.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      promoTag={{
        variant: 'preview',
      }}
    />
  );
}

Кнопка «Избранное» (always)

actionsVisibility="always" — действия видны постоянно; favorite.checked и onChange задают controlled-режим избранного.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

Кнопка «Избранное» (hover)

actionsVisibility="hover" — действия появляются при наведении и фокусе на карточке.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{
        enabled: true,
      }}
    />
  );
}

Неактивное состояние

disabled блокирует взаимодействие с карточкой.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      disabled
    />
  );
}

Обработка клика

onClick вызывается при клике по карточке.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceInfo
        title='Мой сервис'
        description='Краткое описание сервиса для подробного режима карточки.'
        icon={<PlaceholderSVG size={24} />}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка (polymorphic)

Через as и href карточка рендерится как якорь.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceInfo
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      description='Карточка рендерится как якорь через as и href.'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

Props

CardServiceInfoProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | actionsSize | "m" | "s" | m | Размер кнопок действий, для мобильного вида предполагается использовать s | | actionsVisibility | "always" | "hover" | 'hover' | Формат отображения дополнительных действий: всегда или при наведении и фокусе | | as | ElementType | — | Полиморфный элемент: 'button', 'a', {Link} и т.д. | | className | string | — | CSS-класс корневого элемента | | data-test-id | string | — | Support prop для тестов | | description | string | — | Описание сервиса | | disabled | boolean | — | Неактивное состояние | | expandable | { value: boolean; onClick(): void; } | — | Настройки кнопки раскрытия | | favorite | FavoriteProps | — | Настройки кнопки «Избранное». Keyboard: ArrowRight на карточке → Favorite → expand; ArrowLeft — в обратном порядке. | | icon | ReactElement<any, string \| JSXElementConstructor<any>> | — | Иконка сервиса | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | promoTag | CardPromoTagProps | PromoTagPredefinedBaseProps | — | Настройки promo tag. При отсутствии не отображается | | title | string | — | Заголовок карточки |

Related types

CardPromoTagProps = PromoTagPredefinedProps & { as?: never; innerRef?: never; }
CardSize = "m" | "s"

FavoriteProps

VisibilityStrategy = "always" | "hover"

CardServiceSmall

Компактная карточка сервиса — эмблема, заголовок, promo badge и кнопка «Избранное».

Компактная интерактивная строка: эмблема + заголовок + promo badge + кнопка «Избранное».

Примеры использования

Базовый пример

Компактная строка с эмблемой и заголовком.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} />;
}

Promo badge

Через promoBadge в правом верхнем углу отображается промо-бейдж.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { APPEARANCE, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      promoBadge={{
        label: 'Promo Tag',
        appearance: APPEARANCE.Primary,
        role: ROLE_APPEARANCE.Accent,
        size: SIZE.Xs,
      }}
    />
  );
}

Обрезка заголовка

truncate.title ограничивает число строк заголовка через TruncateString.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинное название сервиса, которое не помещается в одну строку и обрезается через TruncateString';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 280 }}>
      <CardServiceSmall title={longTitle} emblem={{ icon: PlaceholderSVG }} truncate={{ title: 1 }} />
    </div>
  );
}

Выбранное состояние

checked подсвечивает карточку как выбранную.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithChecked() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} checked />;
}

Рамка (outline)

outline добавляет контур вокруг карточки.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithOutline() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} outline />;
}

Кнопка «Избранное» (always)

actionsVisibility="always" — кнопка видна постоянно; checked и onChange задают controlled-режим.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

Кнопка «Избранное» (hover)

actionsVisibility="hover" — кнопка появляется при наведении и фокусе на карточке.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{ enabled: true }}
    />
  );
}

Неактивное состояние

disabled блокирует взаимодействие с карточкой.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} disabled />;
}

Обработка клика

onClick передаётся в корневой Card — карточка интерактивна по умолчанию.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceSmall
        title='Название сервиса'
        emblem={{ icon: PlaceholderSVG }}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка (polymorphic)

Через as и href карточка рендерится как якорь.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceSmall
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      emblem={{ icon: PlaceholderSVG }}
    />
  );
}

Props

CardServiceSmallProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | actionsVisibility | "always" | "hover" | 'hover' | Формат отображения кнопки «Избранное»: всегда или при наведении и фокусе | | as | ElementType | — | Полиморфный элемент: 'div', 'a', {Link} и т.д. | | checked | boolean | — | Выбранное состояние | | className | string | — | CSS-класс корневого элемента | | data-test-id | string | — | Support prop для тестов | | disabled | boolean | — | Неактивное состояние | | emblem | ReactElement<any, string \| JSXElementConstructor<any>> \| { icon: JSXElementConstructor<{ className?: string \| undefined; size?: number \| undefined; }>; } | — | Эмблема: объект с иконкой-компонентом. Принимает { icon: JSXElementConstructor } или произвольный ReactElement. | | favorite | FavoriteProps | — | Настройки кнопки «Избранное» | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | outline | boolean | — | Рамка вокруг карточки | | promoBadge | PromoTagOwnProps | PromoTagProps | — | Промо-тег (бейдж). Тип — PromoTagProps из @cloud-ru/ds-promo-tag. | | title | string | — | Заголовок карточки | | truncate | { title?: number; } | — | Настройки обрезки заголовка |

Related types

FavoriteProps

VisibilityStrategy = "always" | "hover"

Видимость действий

Проп карточки actionsVisibility ('hover' по умолчанию) управляет всеми действиями сразу — тултипом, избранным и кнопкой раскрытия. пакета. favorite.visibilityStrategy устарел и оставлен для совместимости: если actionsVisibility не задан, значение берётся из него.

CardSuggest

Карточка-подсказка с двумя размерами (m/s), управляющими типографикой и отступами.

Когда использовать

Подсказки и onboarding-карточки в интерфейсе.
Компактные информационные блоки с заголовком и описанием.

Примеры использования

Базовый пример

Карточка-подсказка с заголовком и описанием (size="m").

import { CARD_SIZE, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      size={CARD_SIZE.M}
    />
  );
}

Размер s

size="s" уменьшает типографику и отступы.

import { CARD_SIZE, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function SizeSmall() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      size={CARD_SIZE.S}
    />
  );
}

Promo badge

Через promoBadge под описанием отображается промо-бейдж.

import { APPEARANCE, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      promoBadge={{
        label: 'New',
        appearance: APPEARANCE.Primary,
        role: ROLE_APPEARANCE.Accent,
        size: SIZE.Xs,
      }}
    />
  );
}

Обрезка текста

truncate.title и truncate.description ограничивают число строк через TruncateString.

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинный заголовок подсказки, который не помещается в две строки и обрезается через TruncateString';
const longDescription =
  'Очень длинное описание подсказки, которое не помещается в три строки и обрезается через TruncateString. Дополнительный текст для демонстрации обрезки.';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 320 }}>
      <CardSuggest title={longTitle} content={longDescription} truncate={{ title: 2, content: 3 }} />
    </div>
  );
}

Неактивное состояние

disabled блокирует взаимодействие с карточкой.

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return (
    <CardSuggest title='Подсказка для пользователя' content='Краткое описание действия или функциональности' disabled />
  );
}

Обработка клика

onClick передаётся в корневой Card — карточка интерактивна по умолчанию.

import { Typography } from '@cloud-ru/ds-typography';
import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardSuggest
        title='Подсказка для пользователя'
        content='Краткое описание действия или функциональности'
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка (polymorphic)

Через as и href карточка рендерится как якорь.

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardSuggest
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Подсказка-ссылка'
      content='Это якорный элемент'
    />
  );
}

Props

CardSuggestProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | as | ElementType | — | Полиморфный элемент: 'div', 'a', {Link} и т.д. | | className | string | — | CSS-класс корневого элемента | | content | string | — | Описание | | data-test-id | string | — | Support prop для тестов | | disabled | boolean | — | Неактивное состояние | | innerRef | PolymorphicRef | — | Ref на реальный DOM-элемент / инстанс | | promoBadge | PromoTagOwnProps | PromoTagProps | — | Промо-тег. Используйте PromoTagProps из @cloud-ru/ds-promo-tag. | | size | "m" | "s" | m | Размер: управляет типографикой и отступами. 'm' — roleTitle/m + roleBody/m, padding 16px; 's' — roleTitle/s + roleBody/s, padding 8px. | | title | string | — | Заголовок | | truncate | { title?: number; content?: number; } \| undefined | — | Настройки обрезки текста |

Related types

CardSize = "m" | "s"

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

CardPredefined

Установка

CardBanner

Когда использовать

Примеры использования

Базовый пример

Обработка клика

Закрываемый баннер

Ссылка (polymorphic)

Props

CardService

Когда использовать

Props

CardServiceLight

Когда использовать

Примеры использования

Базовый пример

Promo tag

Обрезка заголовка

Кнопка «Избранное» (always)

Кнопка «Избранное» (hover)

Неактивное состояние

Обработка клика

Ссылка (polymorphic)

Props

Related types

Видимость действий

Адаптивность

CardServiceInfo

Когда использовать

Примеры использования

Базовый пример

Promo tag

Кнопка «Избранное» (always)

Кнопка «Избранное» (hover)

Неактивное состояние

Обработка клика

Ссылка (polymorphic)

Props

Related types

CardServiceSmall

Примеры использования

Базовый пример

Promo badge

Обрезка заголовка

Выбранное состояние

Рамка (outline)

Кнопка «Избранное» (always)

Кнопка «Избранное» (hover)

Неактивное состояние

Обработка клика

Ссылка (polymorphic)

Props

Related types

Видимость действий

CardSuggest

Когда использовать

Примеры использования

Базовый пример

Размер s

Promo badge

Обрезка текста

Неактивное состояние

Обработка клика

Ссылка (polymorphic)

Props

Related types