330 lines
19 KiB
Plaintext
330 lines
19 KiB
Plaintext
---
|
||
title: "DP Trade — Product card · White background variants"
|
||
layout: layouts/default
|
||
permalink: /product-card-white.html
|
||
bodyClass: compact-type
|
||
---
|
||
<main class="section card-whitebg-section">
|
||
<div class="container">
|
||
<div class="card-lab-head">
|
||
<div>
|
||
<p class="eyebrow">UI-kit / Product cards</p>
|
||
<h1>Карточка товара на белом фоне</h1>
|
||
</div>
|
||
<p>Часть изображений бутылок сохранена на чистом белом фоне — под такие фото нужны карточки, где блок-медиа тоже белый. Ниже несколько вариантов решения: от минимального контура до акцентной рамки и split-композиции.</p>
|
||
</div>
|
||
|
||
<!-- Variant A -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-a">
|
||
<p class="eyebrow">Variant A · minimal outline</p>
|
||
<h2 id="whitebg-a">Чистый белый с тонкой рамкой</h2>
|
||
<p class="variant-note">Карточка и медиа на одном белом фоне, разделения нет. Только 1px нейтральный контур, чтобы отделить её от страницы. Самый нейтральный и «каталожный» вариант — бутылки на белом PNG встают без швов.</p>
|
||
<div class="card-whitebg-grid">
|
||
<article class="product-card product-card--white-pure">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Bordeaux</span>
|
||
<h3>Chateau Laroque Grand Cru</h3>
|
||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>3 890 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-pure">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Toscana</span>
|
||
<h3>Brunello di Montalcino</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-pure">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Mosel</span>
|
||
<h3>Dr. Loosen Riesling</h3>
|
||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>2 990 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Variant B -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-b">
|
||
<p class="eyebrow">Variant B · elevated</p>
|
||
<h2 id="whitebg-b">Белая карточка с мягкой тенью</h2>
|
||
<p class="variant-note">Без рамки, но с лёгкой тенью. Карточка «приподнята» над тёплым фоном страницы — премиальнее, чем outline. Хорошо работает, когда страница сама тёплая кремовая (V2 background), а карточка должна ощущаться как бумага.</p>
|
||
<div class="card-whitebg-grid">
|
||
<article class="product-card product-card--white-elevated">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Bordeaux</span>
|
||
<h3>Chateau Laroque Grand Cru</h3>
|
||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>3 890 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-elevated">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Piemonte</span>
|
||
<h3>Marchesi Barolo</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>5 180 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-elevated">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Toscana</span>
|
||
<h3>Brunello di Montalcino</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Variant C -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-c">
|
||
<p class="eyebrow">Variant C · hairline divider</p>
|
||
<h2 id="whitebg-c">Белое медиа + золотая тонкая линия</h2>
|
||
<p class="variant-note">Медиа и тело на едином белом фоне, разделены только hairline-линией золотого акцента. Editorial-вайб, без тяжёлых блоков. Подходит для флагманских подборок и промо-полок.</p>
|
||
<div class="card-whitebg-grid">
|
||
<article class="product-card product-card--white-hairline">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Mosel</span>
|
||
<h3>Dr. Loosen Riesling</h3>
|
||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>2 990 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-hairline">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Bordeaux</span>
|
||
<h3>Chateau Laroque Grand Cru</h3>
|
||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>3 890 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-hairline">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Toscana</span>
|
||
<h3>Brunello di Montalcino</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Variant D -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-d">
|
||
<p class="eyebrow">Variant D · framed media</p>
|
||
<h2 id="whitebg-d">Белое медиа в бордовой рамке</h2>
|
||
<p class="variant-note">Белый фон сохраняется, но медиа-блок обводится тонкой бордовой рамкой. Бутылка визуально «заперта» в окне и не растворяется в странице. Даёт больше структуры, чем hairline, не уходя в тяжёлый outline.</p>
|
||
<div class="card-whitebg-grid">
|
||
<article class="product-card product-card--white-framed">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Piemonte</span>
|
||
<h3>Marchesi Barolo</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>5 180 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-framed">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Mosel</span>
|
||
<h3>Dr. Loosen Riesling</h3>
|
||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>2 990 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-framed">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Toscana</span>
|
||
<h3>Brunello di Montalcino</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Variant E -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-e">
|
||
<p class="eyebrow">Variant E · split</p>
|
||
<h2 id="whitebg-e">Split: белое медиа + тёплое тело</h2>
|
||
<p class="variant-note">Медиа остаётся на белом, а info-часть уходит на тёплый #F5F0E8. Визуально делит карточку на «полку с бутылкой» и «описание». Сильнее структурирует сетку каталога, полезно, когда карточек много.</p>
|
||
<div class="card-whitebg-grid">
|
||
<article class="product-card product-card--white-split">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Bordeaux</span>
|
||
<h3>Chateau Laroque Grand Cru</h3>
|
||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>3 890 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-split">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Toscana</span>
|
||
<h3>Brunello di Montalcino</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
<article class="product-card product-card--white-split">
|
||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||
<div class="product-meta">
|
||
<span class="tag tag--filled">Piemonte</span>
|
||
<h3>Marchesi Barolo</h3>
|
||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||
</div>
|
||
<div class="product-footer">
|
||
<strong>5 180 ₽</strong>
|
||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Wide F -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-f">
|
||
<p class="eyebrow">Variant F · wide / catalog</p>
|
||
<h2 id="whitebg-f">Широкая строка каталога, белая</h2>
|
||
<p class="variant-note">Горизонтальный формат B2B-каталога на белом: фото слева, описание в центре, цена и CTA справа. Тонкий контур вокруг строки. Бутылки с белым PNG встают без «коробок».</p>
|
||
<div class="catalog-card-variants">
|
||
<article class="catalog-card-sample">
|
||
<p class="catalog-card-sample__label">Wide · outline</p>
|
||
<div class="product-card product-card--list product-card--white-wide">
|
||
<a class="product-image" href="product.html" aria-label="Chateau Laroque Grand Cru">
|
||
<img src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
|
||
</a>
|
||
<div class="product-info">
|
||
<h3>Chateau Laroque Grand Cru, 0.75 л, 2019</h3>
|
||
<p class="product-origin">Красное сухое · Bordeaux · Франция</p>
|
||
<p>Купаж Merlot / Cabernet Franc · 13.5%</p>
|
||
<p>Артикул: 00081538 · Упаковка: 6 шт.</p>
|
||
</div>
|
||
<div class="product-buy">
|
||
<strong>3 890 ₽</strong>
|
||
<a class="button button--primary" href="product.html">В корзину</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Wide G -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-g">
|
||
<p class="eyebrow">Variant G · wide split</p>
|
||
<h2 id="whitebg-g">Split-строка: белое фото + тёплое описание</h2>
|
||
<p class="variant-note">Фото живёт в белом окне-«полке», справа — тёплый #F5F0E8 info-блок с ценой. Сильнее разделяет ассортимент и метаданные, удобно для плотных каталожных сеток.</p>
|
||
<div class="catalog-card-variants">
|
||
<article class="catalog-card-sample">
|
||
<p class="catalog-card-sample__label">Wide · split</p>
|
||
<div class="product-card product-card--list product-card--white-wide-split">
|
||
<a class="product-image" href="product.html" aria-label="Brunello di Montalcino">
|
||
<img src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
|
||
</a>
|
||
<div class="product-info">
|
||
<h3>Brunello di Montalcino, 0.75 л, 2018</h3>
|
||
<p class="product-origin">Красное сухое · Toscana · Италия</p>
|
||
<p>100% Sangiovese · 14%</p>
|
||
<p>Артикул: 00080768 · Упаковка: 6 шт.</p>
|
||
</div>
|
||
<div class="product-buy">
|
||
<strong>4 240 ₽</strong>
|
||
<a class="button button--primary" href="product.html">В корзину</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Wide H -->
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-h">
|
||
<p class="eyebrow">Variant H · wide hairline</p>
|
||
<h2 id="whitebg-h">Строка с золотой разделительной линией</h2>
|
||
<p class="variant-note">Весь фон белый, фото отделено от текстовой части тонкой золотой вертикальной линией. Самый «editorial» wide-вариант — читается как строка винной карты.</p>
|
||
<div class="catalog-card-variants">
|
||
<article class="catalog-card-sample">
|
||
<p class="catalog-card-sample__label">Wide · hairline</p>
|
||
<div class="product-card product-card--list product-card--white-wide-hairline">
|
||
<a class="product-image" href="product.html" aria-label="Dr. Loosen Riesling">
|
||
<img src="assets/images/00073820_1.png" alt="Dr. Loosen Riesling" />
|
||
</a>
|
||
<div class="product-info">
|
||
<h3>Dr. Loosen Riesling, 0.75 л, 2022</h3>
|
||
<p class="product-origin">Белое полусухое · Mosel · Германия</p>
|
||
<p>100% Riesling · 8.5%</p>
|
||
<p>Артикул: 00073820 · Упаковка: 6 шт.</p>
|
||
</div>
|
||
<div class="product-buy">
|
||
<strong>2 990 ₽</strong>
|
||
<a class="button button--primary" href="product.html">В корзину</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card-whitebg-block" aria-labelledby="whitebg-summary">
|
||
<p class="eyebrow">Резюме</p>
|
||
<h2 id="whitebg-summary">Какой брать</h2>
|
||
<p class="variant-note">Сеточные (плитки): для каталога и плотной сетки — <strong>A (outline)</strong> или <strong>E (split)</strong>; для главной и подборок — <strong>B (elevated)</strong> или <strong>C (hairline)</strong>; <strong>D (framed)</strong> — промежуточный. Широкие (каталог-строки): <strong>F (outline)</strong> как дефолт B2B, <strong>G (split)</strong> когда нужно визуально отделить метаданные, <strong>H (hairline)</strong> для editorial-подборок.</p>
|
||
</section>
|
||
</div>
|
||
</main>
|