---
title: "DP Trade — Bottle Card Variants"
layout: layouts/default
permalink: /bottle-cards.html
bodyClass: compact-type
---
<main class="section card-lab-section">
  <div class="container">
    <div class="card-lab-head">
                <div>
                  <p class="eyebrow">UI-kit / Product cards</p>
        <h1>Варианты карточек бутылок</h1>
      </div>
      <p>Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.</p>
    </div>

    <section class="card-variant-block" aria-labelledby="cards-grid-title">
      <div class="card-variant-title">
        <p class="eyebrow">Variant 01</p>
        <h2 id="cards-grid-title">Акцентные карточки каталога</h2>
      </div>
      <div class="bottle-card-grid">
        <article class="bottle-card bottle-card--bordeaux">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
          </div>
          <div class="bottle-card__body">
            <p class="bottle-card__region">Bordeaux</p>
            <h3>Chateau Laroque Grand Cru</h3>
            <p>France · Red dry · 2019 · 0.75 L</p>
          </div>
          <div class="bottle-card__footer">
            <strong>3 890 ₽</strong>
            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
          </div>
        </article>

        <article class="bottle-card bottle-card--tuscany">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
          </div>
          <div class="bottle-card__body">
            <p class="bottle-card__region">Tuscany</p>
            <h3>Brunello di Montalcino</h3>
            <p>Italy · Red dry · 2018 · 0.75 L</p>
          </div>
          <div class="bottle-card__footer">
            <strong>4 240 ₽</strong>
            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
          </div>
        </article>

        <article class="bottle-card bottle-card--mosel">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" />
          </div>
          <div class="bottle-card__body">
            <p class="bottle-card__region">Mosel</p>
            <h3>Riesling Kabinett</h3>
            <p>Germany · White · 2021 · 0.75 L</p>
          </div>
          <div class="bottle-card__footer">
            <strong>2 150 ₽</strong>
            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
          </div>
        </article>
      </div>
    </section>

    <section class="card-variant-block" aria-labelledby="cards-alt-title">
      <div class="card-variant-title">
        <p class="eyebrow">Variant 02-04</p>
        <h2 id="cards-alt-title">Альтернативные форматы</h2>
      </div>
      <div class="bottle-card-mix">
        <article class="bottle-card bottle-card--clean">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Oremus Case of Aszu" />
          </div>
          <div class="bottle-card__body">
            <p class="bottle-card__region">Clean retail</p>
            <h3>Oremus Case of Aszu 5 Puttonyos</h3>
            <p>Hungary · White sweet · 2000 · 0.5 L</p>
          </div>
          <div class="bottle-card__footer">
            <strong>19 240 ₽</strong>
            <a class="button button--secondary button--sm" href="product.html">В избранное</a>
          </div>
        </article>

        <article class="bottle-card bottle-card--compact">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Oremus Tokaji Aszu" />
          </div>
          <div class="bottle-card__body">
            <p class="bottle-card__region">Compact</p>
            <h3>Tokaji Aszu 5 Puttonyos</h3>
            <p>Hungary · 12% · Furmint, Harslevelu</p>
          </div>
          <div class="bottle-card__footer">
            <strong>19 240 ₽</strong>
            <a class="button button--primary button--sm" href="product.html">Подробнее</a>
          </div>
        </article>

        <article class="bottle-card bottle-card--horizontal">
          <div class="bottle-card__media">
            <img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Oremus Tokaji Late Harvest" />
          </div>
          <div class="bottle-card__content">
            <div class="bottle-card__body">
              <p class="bottle-card__region">B2B row card</p>
              <h3>Oremus Tokaji Late Harvest</h3>
              <p>Вино белое полусладкое · Венгрия · 11.5%</p>
              <p class="bottle-card__details">Сорт: Фурминт, Зета, Харшлевелю</p>
            </div>
            <div class="bottle-card__footer">
              <strong>4 980 ₽</strong>
              <a class="button button--secondary button--sm" href="product.html">В избранное</a>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="card-variant-block" aria-labelledby="catalog-card-title">
      <div class="card-variant-title">
        <p class="eyebrow">Catalog current</p>
        <h2 id="catalog-card-title">Варианты текущей карточки каталога</h2>
      </div>
      <div class="catalog-card-variants">
        <article class="catalog-card-sample">
          <p class="catalog-card-sample__label">Default / как в каталоге</p>
          <div class="product-card product-card--list">
            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
              <img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
            </a>
            <div class="product-info">
              <h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
              <p>Вино Белое Сладкое<br />12 %</p>
              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
            </div>
            <div class="product-buy">
              <strong>19 240 ₽</strong>
              <a class="button button--secondary" href="#">В избранное</a>
            </div>
          </div>
        </article>

        <article class="catalog-card-sample">
          <p class="catalog-card-sample__label">Compact / меньше высота</p>
          <div class="product-card product-card--list product-card--list-compact">
            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
              <img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
            </a>
            <div class="product-info">
              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
              <p>Сладкое · 12% · Фурминт, Харшлевелю, Мускат</p>
            </div>
            <div class="product-buy">
              <strong>19 240 ₽</strong>
              <a class="button button--secondary" href="#">В избранное</a>
            </div>
          </div>
        </article>

        <article class="catalog-card-sample">
          <p class="catalog-card-sample__label">Hover / активная строка</p>
          <div class="product-card product-card--list product-card--list-hover">
            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
              <img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
            </a>
            <div class="product-info">
              <h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
              <p>Вино Белое Полусладкое<br />11.5 %</p>
              <p>Сорт: Фурминт, Зета, Харшлевелю</p>
            </div>
            <div class="product-buy">
              <strong>4 980 ₽</strong>
              <a class="button button--primary" href="#">Подробнее</a>
            </div>
          </div>
        </article>

        <article class="catalog-card-sample">
          <p class="catalog-card-sample__label">Color image / цветной фон фото</p>
          <div class="product-card product-card--list product-card--list-color">
            <a class="product-image product-image--gold" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
              <img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
            </a>
            <div class="product-info">
              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
              <p class="product-origin">Вино белое, Oremus, Венгрия</p>
              <p>Вино Белое Сладкое<br />12 %</p>
              <p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
            </div>
            <div class="product-buy">
              <strong>19 240 ₽</strong>
              <a class="button button--secondary" href="#">В избранное</a>
            </div>
          </div>
        </article>

        <article class="catalog-card-sample">
          <p class="catalog-card-sample__label">B2B dense / больше данных</p>
          <div class="product-card product-card--list product-card--list-b2b">
            <a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
              <img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
            </a>
            <div class="product-info">
              <h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
              <p class="product-origin">Венгрия · Tokaj · Oremus · 0.5 л · 12%</p>
              <div class="product-params">
                <span>Тип: белое сладкое</span>
                <span>Сорт: Фурминт 70%</span>
                <span>Упаковка: 6 шт.</span>
                <span>Артикул: 00073820</span>
              </div>
            </div>
            <div class="product-buy">
              <strong>19 240 ₽</strong>
              <a class="button button--secondary" href="#">В избранное</a>
            </div>
          </div>
        </article>
      </div>
    </section>
  </div>
</main>
