Card
Визуальный контейнер, который объединяет различные элементы, такие как изображения, текст и кнопки, в единый блок
Анатомия и возможности
Компонент Card — базовый flex-контейнер. Внутри него можно комбинировать текст, media и действия в любом порядке.
| Часть | Назначение |
|---|---|
Card | Корневой контейнер. Управляет orientation, size, selected, backgroundType |
CardContent | Область media с aspectRatio, скруглениями и overflow: hidden |
CardInnerContent | Absolute overlay поверх изображения; не влияет на размер карточки |
Размер карточки задаётся явно через style={{ width }} или контентом. Отступы внутри — вручную или через соседние компоненты (Button, Badge, typography). Отступы внутри — вручную или через соседние компоненты (Button, Badge, typography).
Пример с вложенным контентом
Пример выбранной карточки с backgroundType="solid"
Простая карточка
Карточка только с текстом — без изображения.
Карточка товара
Карточка с изображением, ценой и действием — типичный паттерн для каталога.
Горизонтальная media-карточка
Изображение сбоку, текстовый блок справа.
Текст поверх изображения
Текст накладывается на media через CardInnerContent.
Info Card
Карточка со статистикой — без media, только контент.
Task Card
Карточка задачи со статусами и метаданными.
Сетка карточек
Несколько карточек в ряд с фиксированной шириной и переносом. Для адаптивных колонок используйте компонент Grid.