CardCustom
Готовые блоки CardCustom.Header, CardCustom.Image, CardCustom.FunctionBadge и CardCustom.Footer.* для типовой компоновки карточки. Body — через Typography. Собирается поверх Card из @cloud-ru/ds-card.
Собирается из слотов вручную — когда готовые пресеты (CardService, CardServiceLight, CardBanner) не подходят и нужна своя компоновка контента внутри карточки.
Установка
import { Card } from '@cloud-ru/ds-card'
import { CardCustom } from '@cloud-ru/ds-uikit-product-card-predefined'Примеры использования
Базовая компоновка
Title text
Description text
Body content text
tsx
import { Card } from '@cloud-ru/ds-card';
import { KebabSVG, PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { BACKGROUND_PREDEFINED_FILL } from '@cloud-ru/ds-materials';
import { Typography, VARIANT } from '@cloud-ru/ds-typography';
import { CardCustom } from '@cloud-ru/ds-uikit-product-card-predefined';
import { DEMO_CARD_IMAGE_ALT, DEMO_CARD_IMAGE_SRC } from '../../constants';
const FUNCTION_BADGE_OPTIONS = [
{ content: { label: 'Option 1' } },
{ content: { label: 'Option 2' } },
{ content: { label: 'Option 3' }, tagLabel: 'Tag' },
];
export function Basic() {
return (
<Card radius='m' backgroundPredefined={BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level}>
<CardCustom.Image src={DEMO_CARD_IMAGE_SRC} alt={DEMO_CARD_IMAGE_ALT} />
<CardCustom.FunctionBadge icon={<KebabSVG />} options={FUNCTION_BADGE_OPTIONS} />
<CardCustom.Header
title='Title text'
description='Description text'
metadata='Metadata text'
emblem={{ icon: PlaceholderSVG, appearance: 'primary' }}
/>
<CardCustom.Body>
<Typography as='div' variant={VARIANT.body} size='m'>
Body content text
</Typography>
</CardCustom.Body>
<CardCustom.Footer.Action button={{ label: 'Label text' }} />
</Card>
);
}