CardServiceSmall

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

Установка

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

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

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

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

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

Название сервиса

tsx

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 в правом верхнем углу отображается промо-бейдж.

Название сервиса

Promo Tag

tsx

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.

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

tsx

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 подсвечивает карточку как выбранную.

Название сервиса

tsx

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)outline добавляет контур вокруг карточки.

Название сервиса

tsx

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)

Кнопка «Избранное» (always)favorite.visibilityStrategy="always" — кнопка видна постоянно; checked и onChange задают controlled-режим.

Название сервиса

tsx

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 }}
      favorite={{
        enabled: true,
        visibilityStrategy: VISIBILITY_STRATEGY.always,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

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

Кнопка «Избранное» (hover)favorite.visibilityStrategy="hover" — кнопка появляется при наведении и фокусе на карточке.

Название сервиса

tsx

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 }}
      favorite={{
        enabled: true,
        visibilityStrategy: VISIBILITY_STRATEGY.hover,
      }}
    />
  );
}

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

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

Название сервиса

tsx

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 — карточка интерактивна по умолчанию.

Название сервиса

Кликов по карточке: 0

tsx

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)

Ссылка (polymorphic)Через as и href карточка рендерится как якорь.

Ссылка-сервис

tsx

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

Types

PropsCardServiceSmallProps

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

`FavoriteProps`interface

Prop	Type	Default	Required	Description
`checked`	`boolean \| undefined`	—	no	Состояние избранного (controlled)
`enabled`	`boolean`	—	yes	Включить отображение кнопки избранного
`onChange`	`((value: boolean) => void) \| undefined`	—	no	Колбэк изменения состояния избранного
`visibilityStrategy`	`"always" \| "hover"`	—	no	Формат отображения: всегда или при наведении и фокусе

Related props

`PromoTagOwnProps`interface

Prop	Type	Default	Required	Description
`afterContent`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Контент после текста
`appearance`	`"blue" \| "green" \| "neutral" \| "orange" \| "pink" \| "primary" \| "red" \| "violet" \| "yellow"`	—	no	Внешний вид
`beforeContent`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Контент перед текстом
`className`	`string \| undefined`	—	no	CSS-класс
`label`	`string \| undefined`	—	no	Текст компонента
`onClick`	`MouseEventHandler<HTMLElement> \| undefined`	—	no	Колбэк для обработки клика на тег
`roleAppearance`	`"accent" \| "decor"`	—	no	Роль, в которой применяется `appearance`: акцентная заливка или декоративная
`size`	`"m" \| "s" \| "xs"`	—	no	Размер

`PromoTagProps`interface

Prop	Type	Default	Required	Description
`afterContent`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Контент после текста
`appearance`	`"blue" \| "green" \| "neutral" \| "orange" \| "pink" \| "primary" \| "red" \| "violet" \| "yellow"`	—	no	Внешний вид
`as`	`T \| undefined`	—	no	Элемент или компонент для рендера: 'button' \| 'a' \| Link из react-router-dom и т.п.
`beforeContent`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Контент перед текстом
`className`	`string \| undefined`	—	no	CSS-класс
`data-test-id`	`string \| undefined`	—	no
`innerRef`	`PolymorphicRef<T> \| undefined`	—	no	Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. Явный проп вместо forwardRef — как в Button и AiToolBadge.
`label`	`string \| undefined`	—	no	Текст компонента
`onClick`	`MouseEventHandler<HTMLElement> \| undefined`	—	no	Колбэк для обработки клика на тег
`roleAppearance`	`"accent" \| "decor"`	—	no	Роль, в которой применяется `appearance`: акцентная заливка или декоративная
`size`	`"m" \| "s" \| "xs"`	—	no	Размер

CardServiceSmall

Установка

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

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

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

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

Рамка (outline)

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

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

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

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

Ссылка (polymorphic)

Props

Types

Types

CardServiceSmallProps

Storybook

Figma

CardServiceSmall

Установка

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

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

Promo badge

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

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

Рамка (outline)

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

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

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

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

Ссылка (polymorphic)

Props

Types

FavoritePropsinterface

Related props

PolymorphicReftype

PromoTagOwnPropsinterface

PromoTagPropsinterface

Types

CardServiceSmallProps

FavoriteProps

Related props

PolymorphicRef

PromoTagOwnProps

PromoTagProps

Storybook

Figma

`FavoriteProps`interface

`PolymorphicRef`type

`PromoTagOwnProps`interface

`PromoTagProps`interface