CardServiceInfo

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

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

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

Установка

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

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

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

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

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

tsx

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

tsx

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)

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

tsx

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)

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

tsx

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 блокирует взаимодействие с карточкой.

tsx

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 вызывается при клике по карточке.

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

tsx

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)

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

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

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

tsx

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

Types

PropsCardServiceInfoProps

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

`FavoriteProps`interface

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

CardServiceInfo

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

Установка

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

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

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

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

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

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

Ссылка (polymorphic)

Props

Types

Unions

Types

CardServiceInfoProps

Unions

Storybook

Figma

CardServiceInfo

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

Установка

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

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

Promo tag

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

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

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

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

Ссылка (polymorphic)

Props

Types

CardPromoTagPropstype

FavoritePropsinterface

Unions

VisibilityStrategyunion

Related props

PolymorphicReftype

PromoTagPredefinedBasePropstype

Types

CardServiceInfoProps

CardPromoTagProps

FavoriteProps

Unions

VisibilityStrategy

Related props

PolymorphicRef

PromoTagPredefinedBaseProps

Storybook

Figma

`CardPromoTagProps`type

`FavoriteProps`interface

`VisibilityStrategy`union

`PolymorphicRef`type

`PromoTagPredefinedBaseProps`type