CardBanner
Промо-баннер с заголовком, описанием, CTA-ссылкой и изображением. Поддерживает опциональную кнопку закрытия.
Когда использовать
- Промо-блоки на главной или в каталоге сервисов.
- Баннер с иллюстрацией и одним основным действием.
Установка
pnpm add @cloud-ru/ds-uikit-product-card-predefinedimport { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined'Примеры использования
Базовый пример
Заголовок карточки
Краткое описание сервиса или предложения для пользователя
Подробнее
tsx
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
Подробнее
Кликов по карточке: 0
tsx
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
Подробнее
tsx
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)
tsx
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
Types
Props
CardBannerProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
actionLabel | string | — | yes | Текст кнопки действия |
as | ElementType | — | no | Полиморфный элемент: `'div'`, `'a'`, `{Link}` и т.д. |
className | string | — | no | CSS-класс корневого элемента |
content | string | — | yes | Описание |
data-test-id | string | — | no | Support prop для тестов |
disabled | boolean | — | no | Неактивное состояние |
image | { src: string; alt: string; } | — | yes | Изображение |
innerRef | any | — | no | Ref на реальный DOM-элемент / инстанс |
onClose | MouseEventHandler<HTMLElement> | — | no | Колбэк закрытия. При наличии отображается кнопка «Закрыть» |
title | string | — | yes | Заголовок карточки |