Компонент карточки с пользовательскими свойствами CSS

Компонент карточки — это самостоятельный контейнер для содержимого. Цели дизайна: единообразные внутренние отступы с использованием токенов отступов, настраиваемые цвета с помощью токенов-алиасов, адаптивный размер без JS и поддержка вариантов (с тенью, с обводкой, плоский) через пользовательские свойства CSS.

Используйте единый класс .card с пользовательскими свойствами CSS для настраиваемых значений. Внутренние элементы (заголовок, содержимое, нижний колонтитул) наследуют значения из области действия карточки. Это ограничивает расхождение стилей между экземплярами карточки во всей кодовой базе.

Переопределяйте пользовательские свойства на уровне карточки с помощью классов вариантов, а не создавайте отдельные наборы правил. Классам вариантов достаточно переопределить изменившиеся переменные: неизменённые свойства автоматически наследуют базовые значения без повторения.

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

Используйте clamp() с переопределениями пользовательского свойства для плавного изменения внутренних отступов: --card-padding: clamp(1rem, 4vw, 2rem). В более крупных областях просмотра внутренние отступы становятся просторнее, а в небольших — минимальными; всё управляется одним определением токена.

Сетка карточек с автоматическим заполнением в CSS Grid и minmax создаёт самоорганизующийся макет: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Карточки заполняют доступное пространство и автоматически переносятся без контрольных точек медиазапросов.

Поддерживайте одинаковое соотношение сторон изображений карточек, задав aspect-ratio: 16/9 для контейнера изображения. Изображения заполняют контейнер с помощью object-fit: cover, благодаря чему высота карточек остаётся одинаковой независимо от размеров исходных изображений.

Добавьте состояния при наведении и при наличии фокуса внутри, которые слегка приподнимают карточку: transform: translateY(-2px) и увеличенная box-shadow. Анимируйте их переходами длительностью 200 мс с плавным режимом для преобразования и тени, чтобы обеспечить плавную обратную связь при взаимодействии без лишней нагрузки на компоновщик.

Сделайте всю карточку кликабельной с помощью растянутой ссылки: задайте для карточки относительное позиционирование, а для основной ссылки — абсолютное позиционирование с inset: 0. Программы чтения с экрана озвучивают текст ссылки, а наложенный слой визуально покрывает карточку для пользователей мыши.

Добавьте вариант .card--loading, который заменяет содержимое скелетоном с мерцанием с помощью анимации CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) с анимацией через background-size: 200% и animation: shimmer 1.5s infinite.

В тёмной теме токен --color-surface автоматически меняется со светлого на тёмный. Если приподнятые карточки используют тень для создания эффекта глубины, а на тёмном фоне она становится незаметной, добавьте тонкую границу или увеличьте контраст цвета поверхности, чтобы объём карточек оставался заметным.

Как пользовательские свойства CSS позволяют создавать варианты карточки без дублирования полного набора правил?

Создание компонента карточки с пользовательскими свойствами CSS формирует гибкий, настраиваемый темой и поддерживающий варианты элемент интерфейса. Базовые переменные задают значения по умолчанию, классы вариантов выборочно их переопределяют, а классы тем переопределяют их глобально. В сочетании с адаптивными размерами, доступными ссылками и состояниями загрузки этот шаблон легко масштабируется в разных дизайн-системах.