Alexey S
9e9cd69ce5
- Set up 11ty with Nunjucks templates (src/ → _site/) - Extract shared header and footer into partials — single source of truth - Convert all 11 pages to .njk with front matter (layout, title, permalink) - Add base/default/ui-kit layout chain - Add custom JS element inspector (Alt+I) with Typography, Tokens and Styles panels - Add CLAUDE.md with architecture overview and dev commands - Add .claude/launch.json with dev server configs - Add docs/elementor-token-handoff.md - Add _site/ to .gitignore Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
233 lines
11 KiB
Plaintext
233 lines
11 KiB
Plaintext
---
|
||
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>
|