ContentCard

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

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

Загружается...

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

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

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

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

Внутренний компонент Card получает следующие свойства: mode, getRootRef, Component, style, className.

Свойства `Tappable`

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

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

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

По умолчанию используется тег "li" для повышения доступности компонента. Вы можете прокинуть необходимый вам тег через prop Component. Ссылки на источники: статья про доступность карточек ↗.

Всегда указывайте осмысленный alt:

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

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

Свойства и методы

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`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` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `false`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `false`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`imageObjectFit`	`ObjectFit` Пользовательское значения стиля `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-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

ContentBadge

Counter