bukatchukБлоки
Цена и тарифы
Чёрная секция с ценой и экономией, колонки доводов, тарифные карточки, таблица состава с галочками.
Примеры
Цена и экономия
<section class="price">
<div class="wrap">
<span class="label label--safety">Цена</span>
<div class="price__old">Сопоставимый путь на рынке: 99 000 ₽ вперёд</div>
<div class="price__big">5 000 <span>₽</span> / мес</div>
<p class="sec__lead">Полный доступ ко всем двадцати двум блокам и всем 216 урокам. Это стоимость одного обеда в неделю.</p>
<div class="save">
<div class="save__item"><b class="save__value">60 000 ₽</b><span class="save__label">год подписки против 99 000 ₽ вперёд</span></div>
<div class="save__item"><b class="save__value">−39%</b><span class="save__label">к цене сопоставимого курса</span></div>
<div class="save__item"><b class="save__value">×12</b><span class="save__label">решений о продолжении вместо одного</span></div>
</div>
</div>
</section>Колонки доводов на чёрном
<section class="price">
<div class="wrap">
<h2>Счёт за то же самое,<br>собранное по частям</h2>
<div class="price__cols">
<div class="price__c"><h3>А если сами?</h3><p>Сколько лет уходит, чтобы дойти до уверенности на дежурстве? Сколько настоящих Sev1 нужно пройти, чтобы появился рефлекс?</p></div>
<div class="price__c"><h3>Цена входа, а не цена всего</h3><p>Система отдаётся в шесть раз дешевле по стратегической причине: стать первым результатом, которому вы доверяете.</p></div>
<div class="price__c"><h3>Только на входе</h3><p>Эта цена — для тех, кто со мной ещё не работал. Один раз.</p></div>
</div>
</div>
</section>Тарифы
<div class="tar">
<div class="plan plan--hl">
<div class="plan__tag">Подписка · целевой</div>
<div class="plan__p">5 000 ₽<small>в месяц · отменить можно в любой момент</small></div>
<ul class="plan__list">
<li class="plan__item">Все 22 блока и 216 уроков</li>
<li class="plan__item">Практика в трёх средах</li>
<li class="plan__item">Возврат за первый месяц по сообщению</li>
</ul>
<div class="plan__who">Тем, кто учится сам и хочет платить по месяцу</div>
<a class="btn btn--primary" href="#">Оформить <span class="ph">[ССЫЛКА]</span></a>
</div>
<div class="plan">
<div class="plan__tag">Доступ навсегда</div>
<div class="plan__p">50 000 ₽<small>единоразово · цена десяти месяцев</small></div>
<ul class="plan__list">
<li class="plan__item">Новые материалы навсегда, без доплаты</li>
<li class="plan__item">Возврат в течение 14 дней</li>
<li class="plan__item plan__item--no">Фиксация цены не требуется</li>
</ul>
<div class="plan__who">Тем, кто не хочет считать месяцы</div>
<a class="btn btn--ghost" href="#">Купить <span class="ph">[ССЫЛКА]</span></a>
</div>
</div>Таблица состава
<table class="sum">
<tbody>
<tr><td>216 уроков в проверяемом порядке — все доступны сразу</td><td class="sum__cell--yes"><span class="tick" aria-label="входит">✓</span></td></tr>
<tr><td>Практика в трёх средах, включая бесплатный локальный стенд</td><td class="sum__cell--yes"><span class="tick" aria-label="входит">✓</span></td></tr>
<tr class="sum__row--total"><td>Для сравнения: один курс, покрывающий часть этого пути, стоит 63–99 тысяч единовременно</td><td>5 000 ₽/мес</td></tr>
</tbody>
</table>Установка
bukatchuk-ui add pricingФайлы
| Файл | Назначение |
|---|---|
pricing.css | стили |
example.html | образец разметки, в проект не копируется |
pricing.jekyll.html | вставка для Jekyll |
Варианты
| Класс | Назначение |
|---|---|
plan--hl | |
plan__item--no | |
price__title--narrow | |
sum__row--total | |
sum__cell--yes |
Вставка для Jekyll
{%- comment -%}
Цена и тарифы. Параметр part выбирает, что вывести:
- price — чёрная секция с ценой. Параметры: blk, old, big, lead, save (список {value, label}).
- plans — тарифные карточки. Параметр cards: tag, price, note, items ({text, strike}), who,
button ({href, text_html, primary}), highlight.
- summary — таблица состава. Параметр rows: text, value, check (true — галочка), total (true — итог).
- columns — колонки доводов. Параметр columns: title, text.
Пример: {% include ui/pricing.html part="plans" cards=site.data.tariffs.cards %}
{%- endcomment -%}
{%- case include.part -%}
{%- when 'price' %}
<section class="price">
<div class="wrap">
<span class="label label--safety rv">{{ include.blk }}</span>
<div class="price__old rv">{{ include.old }}</div>
<div class="price__big rv">{{ include.big }}</div>
<p class="sec__lead rv">{{ include.lead }}</p>
<div class="save">
{%- for s in include.save %}
<div class="save__item rv"><b class="save__value">{{ s.value }}</b><span class="save__label">{{ s.label }}</span></div>
{%- endfor %}
</div>
</div>
</section>
{%- when 'plans' %}
<div class="tar">
{%- for c in include.cards %}
<div class="plan{% if c.highlight %} plan--hl{% endif %} rv">
<div class="plan__tag">{{ c.tag }}</div>
<div class="plan__p">{{ c.price }}<small>{{ c.note }}</small></div>
<ul class="plan__list">
{%- for i in c.items %}
<li class="plan__item{% if i.strike %} plan__item--no{% endif %}">{{ i.text }}</li>
{%- endfor %}
</ul>
<div class="plan__who">{{ c.who }}</div>
<a class="btn {% if c.button.primary %}btn--primary{% else %}btn--ghost{% endif %}" href="{{ c.button.href }}">{{ c.button.text_html }}</a>
</div>
{%- endfor %}
</div>
{%- when 'summary' %}
<table class="sum rv">
<tbody>
{%- for r in include.rows %}
<tr{% if r.total %} class="sum__row--total"{% endif %}>
<td>{{ r.text }}</td>
{%- if r.check %}
<td class="sum__cell--yes"><span class="tick" aria-label="входит">✓</span></td>
{%- else %}
<td>{{ r.value }}</td>
{%- endif %}
</tr>
{%- endfor %}
</tbody>
</table>
{%- when 'columns' %}
<div class="price__cols">
{%- for c in include.columns %}
<div class="price__c rv"><h3>{{ c.title }}</h3><p>{{ c.text }}</p></div>
{%- endfor %}
</div>
{%- endcase -%}