Библиотека Cards Shop
Сырьевые компоненты: копируй структуру и меняй стили под твой проект.
Все компоненты адаптивны :
max-width: 1920px;
min-width: 320px;
Cards-Shop — это специализированная категория компонентов, сфокусированная на коммерческой эффективности и удобстве пользователя в рамках e-commerce проектов. В этой серии мы отойдем от чисто презентационного контента и сосредоточимся на создании функциональных товарных витрин: от минималистичных карточек для премиальных брендов до насыщенных информационных блоков для маркетплейсов.
LuxuryCollectionShowcase
LuxuryCollectionShowcase — это премиальная витрина, предназначенная для акцентированного представления топовых позиций каталога. Компонент использует контрастные пастельные фоны, которые выделяют товар, не перетягивая внимание на себя. Главная особенность — эффект «левитации», реализованный через синхронное движение объекта и динамической тени, что создает иллюзию глубины и премиального качества продукта.
Адрес в системе :
// src / library / blocks / cardshop / LuxuryCollectionShowcase /
FlashSaleSlider
FlashSaleSlider — это высококонверсионный блок для стимулирования импульсивных покупок. Компонент выделяется за счет динамических градиентных фонов и ярких акцентных плашек «SALE». Главной особенностью является интегрированный таймер обратного отсчета, который создает эффект срочности, и визуальное разделение старой и новой цены. Дизайн выполнен в энергичном стиле, но сохраняет премиальную эстетику благодаря мягким теням и сглаженным углам карточек.
Адрес в системе :
// src / library / blocks / cardshop / FlashSaleSlider /
MinimalistProductTriptych
MinimalistProductTriptych — это воплощение чистоты и фокуса на продукте. Дизайн построен по принципу «ничего лишнего»: три вертикальные карточки на мягких градиентных подложках с крупными фотографиями. Информационный блок сведен к минимуму, чтобы не отвлекать от визуального образа. Главная «фишка» — скрытые элементы управления: ссылка-кнопка покупки плавно появляется только в момент взаимодействия с карточкой, что сохраняет интерфейс чистым и эстетичным до тех пор, пока пользователь не проявит интерес.
Адрес в системе :
// src / library / blocks / cardshop / MinimalistProductTriptych /
CategoryHighlightGrid
CategoryHighlightGrid — это стратегический навигационный блок, предназначенный для распределения трафика по ключевым разделам каталога. Визуальная иерархия достигается за счет использования градиентов разной насыщенности. Каждая карточка оснащена крупным изображением-тизером и акцентной ссылкой, которая при наведении активирует эффект мягкого свечения и масштабирования, превращая выбор категории в интуитивный и приятный процесс.
Популярные категории
Адрес в системе :
// src / library / blocks / cardshop / CategoryHighlightGrid /
MultiColorProductGrid
MultiColorProductGrid — это интерактивная витрина, разработанная для эффективной демонстрации товаров, доступных в нескольких цветовых вариантах. Главная особенность компонента — это миниатюрные цветовые точки под каждой карточкой, которые позволяют пользователю мгновенно менять отображаемое изображение товара на соответствующий оттенок. Динамический отклик, сочетание четких цен и стилизованных ссылок на покупку создает полноценный e-commerce опыт, а адаптивная структура гарантирует безупречное отображение и функциональность на любом устройстве.
Адрес в системе :
// src / library / blocks / cardshop / MultiColorProductGrid /
FeatureFocusedShopRow
FeatureFocusedShopRow — это информационно-насыщенная витрина, ориентированная на быструю презентацию технических преимуществ товара. В отличие от классических сеток, здесь акцент смещен на ключевые характеристики, вынесенные в отдельные контрастные «бабблы» прямо поверх или рядом с изображением. Такая структура позволяет пользователю мгновенно считать ценность продукта (например, автономность, мощность или материалы) и принять решение о покупке. Дизайн сочетает в себе строгую геометрию и мягкие градиентные подложки, создавая образ технологичного и надежного продукта.
Превосходство в деталях
24ч Автономности
Шумоподавление
Elite Sound Pro
Профессиональное звучание с интеллектуальной системой адаптации под окружение.
4K Дисплей
Защита IP68
Vision Watch X
Ваш персональный ассистент с мониторингом здоровья в реальном времени.
Адрес в системе :
// src / library / blocks / cardshop / FeatureFocusedShopRow /
DarkModeJewelryGrid
DarkModeJewelryGrid — это эксклюзивная витрина, выполненная в эстетике «тёмной роскоши». Компонент построен на глубоких угольных градиентах и изящных золотых акцентах, которые создают эффект витрины дорогого бутика. Основной акцент сделан на игре света: при наведении на карточку мягкое золотистое свечение подсвечивает товар, а рамки и ссылки приобретают благородный металлический блеск. Такая визуальная подача подчеркивает ценность и уникальность каждого изделия, превращая просмотр каталога в эстетическое удовольствие.
Premium Collection
Адрес в системе :
// src / library / blocks / cardshop / DarkModeJewelryGrid /
StackedMobileCards
StackedMobileCards — это адаптивный навигационный блок, использующий прогрессивное улучшение для мобильного пользовательского опыта. В десктопной версии компонент представлен в виде классического горизонтального ряда карточек на мягких градиентных фонах. Однако при переходе на мобильные разрешения сетка трансформируется в интерактивную «стопку» (stack), где карточки накладываются друг на друга с небольшим смещением. Это не только экономит вертикальное пространство экрана, но и создает игровой эффект при прокрутке или перелистывании, делая интерфейс более живым и тактильным.
Адрес в системе :
// src / library / blocks / cardshop / StackedMobileCards /
BundleDealSection
BundleDealSection — это конверсионный блок «Вместе дешевле», спроектированный для увеличения среднего чека за счет пакетных предложений. Компонент визуально объединяет основной продукт и два дополняющих аксессуара в единую композицию с помощью общей градиентной рамки и связующих элементов. Дизайн четко выстраивает иерархию: крупная карточка флагмана и компактные блоки сопутствующих товаров. Общая выгода подчеркивается ярким акцентом на итоговой цене комплекта, что делает предложение психологически более привлекательным для покупателя.
Выгодный комплект
Основной товар
Professional Camera X1
$1,200
+
Объектив 50mm
$350
Запасной АКБ
$80
Адрес в системе :
// src / library / blocks / cardshop / BundleDealSection /
ReviewIntegratedShopGrid
ReviewIntegratedShopGrid — это товарная сетка с глубокой интеграцией социального доказательства. Каждая карточка в этом блоке, помимо стандартных атрибутов (фото, цена, название), содержит компактный блок с «живым» отзывом и визуальным звездным рейтингом. Такой подход значительно сокращает путь пользователя к покупке, снимая возможные возражения в момент первого контакта. Дизайн выполнен в чистом стиле с использованием мягких градиентных теней и акцентных плашек, что позволяет тексту отзыва оставаться читабельным, не перегружая общую композицию карточки.
Выбор покупателей
Ultra Comfort Sofa
$890
«Самый удобный диван, на котором я когда-либо сидел. Качество ткани на высоте!»
Smart Table Lamp
$120
«Идеально вписалась в интерьер. Регулировка яркости очень плавная и приятная.»
Minimalist Mirror
$210
«Упаковано было отлично. Зеркало без искажений, выглядит очень дорого.»
Адрес в системе :
// src / library / blocks / cardshop / ReviewIntegratedShopGrid /
Смотреть каталог