CardServiceLight

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

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

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

Установка

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

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

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

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

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

Мой сервис

tsx

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

Мой сервис

New

tsx

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

export function WithPromoTag() {
  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      promoTag={{
        label: 'New',
        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 { 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)

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

Мой сервис

tsx

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} />}
      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 { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

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

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

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

Мой сервис

tsx

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

Мой сервис

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

tsx

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)

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

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

tsx

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

Types

PropsCardServiceLightProps

Prop	Type	Default	Required	Description
`as`	`ElementType`	—	no	Полиморфный элемент: `'button'`, `'a'`, `{Link}` и т.д.
`className`	`string`	—	no	CSS-класс корневого элемента
`data-test-id`	`string`	—	no	Support prop для тестов
`disabled`	`boolean`	—	no	Неактивное состояние
`favorite`	`FavoriteProps`	—	no	Настройки кнопки «Избранное». Keyboard: ArrowRight на карточке → фокус на Favourite; ArrowLeft на Favourite → фокус на карточку.
`icon`	`ReactElement<any, string \| JSXElementConstructor<any>>`	—	no	Иконка сервиса
`innerRef`	`any`	—	no	Ref на реальный DOM-элемент / инстанс
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	—	no	Колбэк нажатия клавиши клавиатуры на карточке
`promoTag`	`PromoTagProps`	—	no	Настройки 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	Размер

CardServiceLight

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

Установка

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

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

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

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

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

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

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

Ссылка (polymorphic)

Props

Types

Types

CardServiceLightProps

Storybook

Figma

CardServiceLight

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

Установка

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

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

Promo tag

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

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

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

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

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

Ссылка (polymorphic)

Props

Types

FavoritePropsinterface

Related props

PolymorphicReftype

PromoTagOwnPropsinterface

PromoTagPropsinterface

Types

CardServiceLightProps

FavoriteProps

Related props

PolymorphicRef

PromoTagOwnProps

PromoTagProps

Storybook

Figma

`FavoriteProps`interface

`PolymorphicRef`type

`PromoTagOwnProps`interface

`PromoTagProps`interface