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

<Overview group="data-display">

# ContentCard [tag:component]

Компонент для создания интерактивных карточек с изображением и текстовым содержимым.
Сочетает возможности кликабельных элементов, карточек и медиа-контента.
Автоматически распределяет свойства между вложенными компонентами.

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

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

</Overview>

{/* @example-description: Базовый пример `ContentCard` с изображением, текстовыми блоками и обработчиком клика. */}
<Playground>
  ```jsx
  <ContentCard
    onClick={() => {}}
    src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
    alt="Picture of brown and gray mountains under blue sky during daytime photo"
    overTitle="unsplash"
    title="brown and gray mountains under blue sky during daytime photo"
    description="Mountain changji"
    caption="Photo by Siyuan on Unsplash"
    maxHeight={100}
  />
  ```
</Playground>

## Распределение свойств

### Свойства изображения

Внутренний тэг `img` получает следующие свойства: `getRef`, `maxHeight`, `imageObjectFit`, `src`, `srcSet`, `alt`,
`width`, `height`, `crossOrigin`, `decoding`, `loading`, `referrerPolicy`, `sizes`, `useMap`, `fetchPriority`

### Свойства корневого компонента `Card`

Внутренний компонент [`Card`](/components/card) получает следующие свойства: `mode`, `getRootRef`, `Component`,
`style`, `className`.

### Свойства `Tappable`

Внутренний компонент [`Tappable`](/components/tappable) получает все остальные свойства (кроме `subhead`,
`header`, `text` и `caption`).

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

- **Component** — базовый HTML-тег контейнера (по умолчанию `li`).
- **titleComponent** — тег для обёртки заголовка (по умолчанию `span`).

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

1. По умолчанию используется тег `"li"` для повышения доступности компонента. Вы можете прокинуть необходимый вам тег через prop `Component`.
   Ссылки на источники: [статья про доступность карточек](https://inclusive-components.design/cards/).
2. Всегда указывайте осмысленный `alt`:

   ```jsx
   // Плохо
   <ContentCard src="/product.jpg" alt="Изображение" />

   // Хорошо
   <ContentCard src="/product.jpg" alt="Красный свитер с оленями" />
   ```

3. Используйте семантические теги для заголовков:
   ```jsx
   <ContentCard titleComponent="h3" title="Новости платформы" titleLevel="2" />
   ```

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

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `caption` | `ReactNode` | `-` | Нижний текст. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `li` |  |
| `description` | `ReactNode` | `-` | Текст. |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRef` | `Ref<HTMLImageElement>` | `-` |  |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `hasActive` | `boolean` | `false` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `false` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `imageObjectFit` | `ObjectFit` | `-` | Пользовательское значения стиля `object-fit` для картинки Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit). |
| `maxHeight` | `number` | `-` | Максимальная высота изображения. |
| `mode` | `"plain" \| "shadow" \| "tint" \| "outline" \| "outline-tint"` | `shadow` | Внешний вид карточки. |
| `overTitle` | `ReactNode` | `-` | Текст над заголовком. |
| `title` | `ReactNode` | `-` | Заголовок. |
| `titleComponent` | `ElementType<any, keyof IntrinsicElements>` | `span` | Позволяет поменять тег используемый для заголовка. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |