website/sdds-cs-docs/docs/components/Card.mdx - dev - sdds/plasma

website/sdds-cs-docs/docs/components/Card.mdx
192 строки8 KB
Ilya
feat(sdds-cs): add examples for card
20 авг 2025, 11:17
20 авг 2025, 11:1761d7c95
---
id: card
title: Card
---

import { PropsTable, Description } from '@site/src/components';

# Card
Визуальный контейнер, который объединяет различные элементы, такие как изображения, текст и кнопки, в единый блок

<Description name="Card" />
<PropsTable name="Card" />

### Использование

Настройка размера осуществляется явным образом или в зависимости от содержимого, в том числе, за счет указания соотношения сторон.

Настройка внутренних отступов между контентом карточки осуществляется с учетом конкретного контекста использования компонента.

Компонент `Card` является базовым контейнером. `CardContent` используется для вложенного контента внутри `Card`, со своими скруглениями и имеет `overflow: hidden`.
`CardInnerContent` используется для контента вписанного в размеры `CardContent`, имеет `position: absolute`, не влияет на размер всей карточки.

### Пример с вложенным контентом

```tsx live
import React from 'react';
import { Card, CardContent, CardInnerContent, H3, TextS } from '@salutejs/sdds-cs';

export function App() {
    const SvgBackground = (props) => (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMinYMin slice"
            viewBox="1 0.5 8 8"
            {...props}
            style={{ ...props.style, background: 'var(--text-tertiary)' }}
        >
            <path stroke="#fff" strokeDasharray={1} d="M1 1h7M2 2h7M1 3h7M2 4h7M1 5h7M2 6h7M1 7h7M2 8h7" />
        </svg>
    );

    return (
        <Card orientation="horizontal" style={{ width: '250px' }}>
            <CardContent orientation='vertical' aspectRatio='1/1'>
                <CardInnerContent>
                    <div style={{ padding: '30px' }}>
                        <H3>Заголовок</H3>
                        <TextS style={{ paddingTop: '8px' }}>Как оплатить заправку бонусами СберСпасибо?</TextS>
                    </div>
                </CardInnerContent>
                <SvgBackground width="100%" height="100%" style={{ width: '100%', height: '100%' }} />
            </CardContent>
        </Card>
    );
}
```

### Пример выбранной карточки с `backgroundType="solid"`

```tsx live
import React from 'react';
import { Card, CardContent, H3, TextS } from '@salutejs/sdds-cs';

export function App() {
    const SvgBackground = (props) => (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMinYMin slice"
            viewBox="1 0.5 8 8"
            {...props}
            style={{ ...props.style, background: 'var(--text-tertiary)' }}
        >
            <path stroke="#fff" strokeDasharray={1} d="M1 1h7M2 2h7M1 3h7M2 4h7M1 5h7M2 6h7M1 7h7M2 8h7" />
        </svg>
    );

    return (
        <Card orientation="horizontal" style={{ width: '400px' }} backgroundType="solid" selected>
            <div style={{ padding: '30px' }}>
                <H3>Title</H3>
                <TextS style={{ paddingTop: '8px' }}>Description</TextS>
            </div>
            <CardContent orientation="vertical" aspectRatio="4/3">
                <SvgBackground width="100%" height="100%" style={{ width: '100%', height: '100%' }} />
            </CardContent>
        </Card>
    );
}
```

### Пример карточки `Shopping Card`

```tsx live
import React from 'react';
import { Card, CardContent, BodyM, BodyS, Rating } from '@salutejs/sdds-cs';
import { textSecondary, textTertiary } from '@salutejs/sdds-themes/tokens';

export function App() {
    const SvgBackground = (props) => (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMinYMin slice"
            viewBox="1 0.5 8 8"
            {...props}
            style={{ ...props.style, background: textTertiary }}
        >
            <path stroke="#fff" strokeDasharray={1} d="M1 1h7M2 2h7M1 3h7M2 4h7M1 5h7M2 6h7M1 7h7M2 8h7" />
        </svg>
    );

    return (
        <Card orientation="vertical" style={{ width: '240px', height: '344px', display: 'flex', justifyContent: 'space-between' }} backgroundType="solid" selected>
            <CardContent orientation="vertical" aspectRatio="1/1">
                <SvgBackground width="100%" height="100%" style={{ width: '100%', height: '100%' }} />
            </CardContent>
            <div>
                <BodyM bold>0 ₽</BodyM>
                <BodyM>Батарейка алкал.AA LR6</BodyM>
                <BodyS color={textSecondary}>В наличии: 300 шт.</BodyS>
                <Rating
                    view="accent"
                    value={3.8}
                />
            </div>
        </Card>
    );
}
```

### Пример карточки `Info Card`

```tsx live
import React from 'react';
import { Card, BodyS, BodyM, H2 } from '@salutejs/sdds-cs';
import { IconArrowDiagRightUp } from '@salutejs/plasma-icons';
import { textAccent, textSecondary } from '@salutejs/sdds-themes/tokens';

export function App() {
    return (
        <Card orientation="vertical" backgroundType="solid" style={{ width: '312px' }} selected>
            <div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <BodyM>Название X</BodyM>
                    <IconArrowDiagRightUp size="s" color={textAccent} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '2.25rem' }}>
                    <H2 style={{ fontWeight: '400' }}>X<BodyS style={{ display: 'inline-block', verticalAlign: 'baseline', paddingLeft: '0.25rem' }} color={textSecondary}>шт</BodyS></H2>
                    <H2 style={{ fontWeight: '400' }} color={textSecondary}>X млн <BodyM style={{ display: 'inline-block', verticalAlign: 'baseline' }} color={textSecondary}>₽</BodyM></H2>
                </div>
            </div>
        </Card>
    );
}
```

### Пример карточки `Task Card`

```tsx live
import React from 'react';
import { Card, CardContent, BodyS, BodyM, Badge } from '@salutejs/sdds-cs';
import { IconArrowDiagRightUp } from '@salutejs/plasma-icons';
import { IconFireOutline } from '@salutejs/plasma-icons';
import { IconDotsHorizontalOutline } from '@salutejs/plasma-icons';
import { IconClockCircleOutline } from '@salutejs/plasma-icons';
import { textWarning, textAccent, textSecondary, surfaceWarningMinor, surfaceInfoMinor } from '@salutejs/sdds-themes/tokens';

export function App() {
    return (
        <Card orientation="vertical" backgroundType="solid" style={{ width: '312px' }} selected>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', gap: '0.25rem' }}>
                        <Badge style={{ background: surfaceWarningMinor }}>
                            <IconFireOutline size="xs" color={textWarning} />
                        </Badge>
                        <Badge style={{ background: surfaceInfoMinor, color: '#199AF0' }}>
                            Признак
                        </Badge>
                    </div>
                    <div style={{ display: 'flex', gap: '0.25rem' }}>
                        <IconDotsHorizontalOutline size="s" color={textAccent} />
                        <IconArrowDiagRightUp size="s" color={textAccent} />
                    </div>
                </div>
                <BodyM>Требуется дополнительная информация</BodyM>
                <BodyS color={textSecondary}>Проверка стоимости закупаемых товаров и услуг</BodyS>
                <BodyS color={textSecondary} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}><IconClockCircleOutline size="xs" color="var(--text-secondary, rgba(255, 255, 255, 0.56))" /> до 02.02.2025</BodyS>
            </div>
        </Card>
    );
}
```