Карточка товара — один из самых часто используемых компонентов в вёрстке интернет-магазинов, и от того, насколько удобно она сделана, во многом зависит, решится ли посетитель добавить товар в корзину или пролистает дальше в поисках чего-то более понятного на вид.
Базовая структура карточки обычно включает изображение товара, его название, цену и кнопку добавления в корзину. Изображение чаще всего вёрстают с фиксированным соотношением сторон через object-fit, чтобы фотографии товаров разных пропорций выглядели в сетке карточек единообразно.
Цену стоит визуально выделять — она одна из первых вещей, которую ищет взгляд посетителя при сравнении товаров. Если у товара есть скидка, старую цену часто показывают зачёркнутой рядом с новой, и такое сочетание обычно делают через тег del для старой цены, что семантически честно отражает суть.
Кнопка добавления в корзину должна быть заметной и достаточно крупной для удобного нажатия, особенно на сенсорных экранах телефонов, где слишком мелкая область клика приводит к случайным промахам и раздражению у пользователя.
Состояние наведения на карточку — лёгкое увеличение изображения, появление тени или дополнительной кнопки быстрого просмотра — распространённый приём, который подсказывает, что карточка интерактивна, но эти эффекты стоит делать сдержанными, чтобы не отвлекать от самого товара.
Сетку из таких карточек чаще всего строят на CSS Grid с auto-fit и minmax — так карточки сами подстраивают своё количество в ряду под ширину экрана, без необходимости прописывать отдельные медиазапросы под каждое возможное разрешение витрины магазина.
Примеры вёрстки карточек товаров с разбором структуры и стилей можно посмотреть в коллекциях на web.dev в разделе паттернов вёрстки.
