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

中文文档

4.2.0发布于 2026/11/11Apache-2.0TypeScriptESM + CJS近 30 天下载 7803

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

文档目录26 节

Установка
CardBanner
Когда использовать
Примеры использования
Props
CardService
Когда использовать
Props
CardServiceLight
Когда использовать
Примеры использования
Props
Видимость действий
Адаптивность
CardServiceInfo
Когда использовать
Примеры использования
Props
CardServiceSmall
Примеры использования
Props
Видимость действий
CardSuggest
Когда использовать
Примеры использования
Props

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} />} />;
}

Через 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; }`	—	Настройки обрезки текста заголовка

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} />}
    />
  );
}

Через 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
`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`	—	Заголовок карточки

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"

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 }} />;
}

Через 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; }`	—	Настройки обрезки заголовка

FavoriteProps

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

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}
    />
  );
}

Через 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`	—	Настройки обрезки текста

CardSize = "m" | "s"

版本与发布记录

@cloud-ru/ds-uikit-product-card-predefined 共发布 194 个版本，首次发布于 2026/08/18；过去 12 个月发布了 194 个版本。

版本	发布日期	距今
`4.2.0`latest	2026/11/11	今天
`4.1.11-preview-e8fe6b56.0`preview	2026/11/11	今天
`4.1.11-preview-c0e895ed.0`	2026/11/11	今天
`4.1.11-preview-90b10112.0`	2026/11/11	今天
`4.1.11-preview-fd7dd437.0`	2026/11/10	1 天前
`4.1.11-preview-9a75a2a9.0`	2026/11/10	1 天前

关于 @cloud-ru/ds-uikit-product-card-predefined 的常见问题

@cloud-ru/ds-uikit-product-card-predefined 是什么？

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

如何安装 @cloud-ru/ds-uikit-product-card-predefined？

在项目目录运行 npm install @cloud-ru/ds-uikit-product-card-predefined，或使用 pnpm add / yarn add / bun add。

@cloud-ru/ds-uikit-product-card-predefined 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@cloud-ru/ds-uikit-product-card-predefined 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@cloud-ru/ds-uikit-product-card-predefined 可以商用吗？

@cloud-ru/ds-uikit-product-card-predefined 使用 Apache-2.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

@cloud-ru/ds-uikit-product-card-predefined 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-uikit-product-card-predefined 在 2026/10/10 – 2026/11/08 这 30 天内被下载 7,803 次，日均约 260 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@cloud-ru/ds-uikit-product-card-predefined 还在维护吗？

最新版本 4.2.0 发布于 2026/11/11（今天）；至今共发布 194 个版本，其中过去 12 个月发布了 194 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

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

pnpmpnpm add @cloud-ru/ds-uikit-product-card-predefined
yarnyarn add @cloud-ru/ds-uikit-product-card-predefined
bunbun add @cloud-ru/ds-uikit-product-card-predefined

在你的项目目录中运行此命令。

近 30 天下载

7,803

约 7803 次日均 260 次

统计周期 2026/10/10 – 2026/11/08
数据来自 npm 官方下载统计，1 天前更新

最新版本4.2.0发布于今天

开源许可Apache-2.0宽松许可

包体积1 MB352 个文件 · 解压后

运行依赖18 个

模块格式ESM + CJS

TypeScript自带类型

发布版本194 个近 12 个月 194 个

首次发布2026/08/182 个月前

元数据更新2026/11/11

每一个软件包背后，
都有分享与创造的人。

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

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

版本与发布记录

关于 @cloud-ru/ds-uikit-product-card-predefined 的常见问题

@cloud-ru/ds-uikit-product-card-predefined 是什么？

如何安装 @cloud-ru/ds-uikit-product-card-predefined？

@cloud-ru/ds-uikit-product-card-predefined 支持 TypeScript 吗？

@cloud-ru/ds-uikit-product-card-predefined 支持 ESM 还是 CommonJS？

@cloud-ru/ds-uikit-product-card-predefined 可以商用吗？

@cloud-ru/ds-uikit-product-card-predefined 的下载量有多少？

@cloud-ru/ds-uikit-product-card-predefined 还在维护吗？