---
description: Компонент для создания визуально выделенных контейнеров с содержимым.
tags: card
---

<Overview group="data-display">

# Card [tag:component]

Компонент для создания визуально выделенных контейнеров с содержимым. Обеспечивает семантически правильную
разметку по умолчанию и различные варианты стилевого оформления.

Связанные компоненты:

- [CardGrid](/components/card-grid)
- [CardScroll](/components/card-scroll)

</Overview>

{/* @example-description: Базовая карточка с текстовым содержимым внутри `Div`. */}
<Playground>
  ```jsx
  <Card>
    <Div>
      <Text>Содержимое карточки</Text>
    </Div>
  </Card>
  ```
</Playground>

## Основные возможности

### Семантическая разметка

Компонент поддерживает следующие возможности:

- использование семантически правильного тега `<li>` по умолчанию;
- возможность изменения тега через свойство `Component` для одиночных карточек вне списков;
- поддержка `ARIA`-ролей для улучшения доступности.

```jsx
// Карточка в списке
<Card>
  <Text>Элемент списка</Text>
</Card>

// Одиночная карточка
<Card Component="div">
  <Text>Отдельная карточка</Text>
</Card>
```

## Режимы отображения

Задаётся свойством `mode`.

{/* @example-description: Демонстрация всех вариантов `mode` для визуального оформления карточки. */}
<Playground>
  ```jsx
  <Card mode="tint">
    <Div>
      <Text>mode="tint"</Text>
    </Div>
  </Card>
  <Card mode="shadow">
    <Div>
      <Text>mode="shadow"</Text>
    </Div>
  </Card>
  <Card mode="outline">
    <Div>
      <Text>mode="outline"</Text>
    </Div>
  </Card>
  <Card mode="outline-tint">
    <Div>
      <Text>mode="outline-tint"</Text>
    </Div>
  </Card>
  <Card mode="plain">
    <Div>
      <Text>mode="plain"</Text>
    </Div>
  </Card>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность через семантически правильную разметку.
При необходимости можно:

- изменить тег через свойство `Component`;
- добавить ARIA-роли для улучшения доступности;
- настроить дополнительные атрибуты для конкретных сценариев использования.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `li` |  |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `mode` | `"plain" \| "shadow" \| "tint" \| "outline" \| "outline-tint"` | `tint` | Внешний вид карточки. |