---
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>