Product elements · 7 пунктів
Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут — усі способи вмонтувати product-картки в тіло матеріалу.
Сім блоків нижче охоплюють статичні product-гріди (2 і 3 колонки), video-pair (картка + вертикальне відео) і три варіанти scroll-snap каруселей з трейлінг-карткою "View more". Усі картки — це канонічний product-card з каталогу OnLady: п'ять фото-зон, рожевий wash-фон під hover, badges, wishlist heart і sizes-drawer.
Сама карта зафіксована як єдиний шейп — не вигадуйте власні варіанти. Якщо потрібен інший набір метаданих або інша компоновка деталей — переходьте до іншого елемента бібліотеки (article-related, hero-feature) або підіймайте дискусію про новий шейп.
Ширина блоку задається через тири центральної колонки. Самі картки ширину не задають — вони адаптуються до клітинки, яку їм дав батьківський грід чи карусель. На .col-edge карусель "втікає" за правий край в'юпорту, створюючи відчуття нескінченної стрічки.
012 Product Cards (col-wide)
Дві товарні картки в ряд. Використовується для пар "комплект + аксесуар", "верх + низ", "версія А + версія Б" — будь-якого парного зіставлення двох моделей.
.col-wide · 2 Product Cards (static grid)
На вузьких екранах картки складаються в одну колонку — фото залишається 3:4, тож пропорції не страждають.
023 Product Cards (col-wide)
Три товарні картки в ряд. Стандартний рекомендаційний блок: "разом дешевше", "три кращі моделі сезону", "три ракурси однієї колекції".
.col-wide · 3 Product Cards (static grid)
На вузьких екранах теж згортається в одну колонку (через одну проміжну на середніх). 3:4 портретне фото лишається читабельним.
03Wide 3 Product Cards (col-rail)
Та сама трійка карток, але розширена до межі правого рейлу. Дає більше "повітря" навколо кожного фото — підходить для лукбук-добірок, де картки самі є акцентом.
.col-rail · Wide 3 Product Cards (static grid)
На малих екранах .col-rail деградує до .col-wide, тож грид залишається коректним. Це той самий шейп, що й 02, але з вищим розміром фото — добре працює як підсумок розділу зйомки.
04Video Pair (col-wide)
Гібрид "товар + вертикальне відео". Ліва колонка — повна карта товару, права — placeholder для відео 9:16 (Instagram Reels, TikTok-style review).
.col-wide · Video Pair (product + vertical video)
Обидві колонки рівні (1fr · 1fr). На мобільному блок згортається в одну колонку: спочатку товар, потім відео.
052-Card Product Carousel (col-wide)
Карусель товарних карток з 2 видимими слайдами. Кінцева — "View more" з посиланням на повний каталог. Корисна для тематичних добірок усередині статті.
.col-wide · 2-Card Product Carousel (#elem-pc-2)
Мінімум 3 товарні слайди + 1 "view more". Менше — і карусель виглядає неповною.
06Wide 3-Card Product Carousel (col-rail)
Карусель з 3 видимими слайдами на ширину "колонка + правий рейл". Більше товарів у полі зору — підходить для масивних добірок (10+ позицій).
.col-rail · Wide 3-Card Product Carousel (#elem-pc-wide-3)
Завдяки .col-rail, права межа каруселі збігається з краєм правого рейлу — добре для статей з порожнім правим рейлом.
07Bleed-Right Product Carousel (col-edge)
Карусель, яка анкорена в лівому краї центральної колонки і "втікає" за правий край в'юпорту. Найдраматичніший варіант — справляє враження "нескінченної стрічки", куди можна гортати правіше.
.col-edge · Bleed-Right Product Carousel (#elem-pc-bleed)
Підходить для імерсивних блоків наприкінці статті — коли ви вже не утримуєте увагу читача в колонці прози, а навпаки тягнете в каталог.
08Підсумок
Сім способів вмонтувати product-картки в статтю — від найкомпактнішого (2-up grid) до найдраматичнішого (col-edge bleed-right карусель). Усі картки — канонічні: те, що ви бачите в каталозі, те ж і в статтях.
Це навмисна жорсткість: один шейп = одна модель поведінки. Користувач, який бачив hover у каталозі, отримує той самий hover у статті — нічого нового запам'ятовувати не треба.
Якщо потрібен альтернативний "продуктовий" блок (наприклад, картка + великий explanation-блок поряд) — це окремий шейп, а не варіація product-card. Підіймайте дискусію через design rev'ю, а не локальний хак.