bukatchuk ui

Блоки

Гарантии

Карточки гарантий и условий в три колонки; главная выделяется оранжевым.

guarantee с версии 0.1.0

Примеры

Три гарантии
<div class="guar">
  <div class="guar__i"><b>Первый месяц — возврат по сообщению</b>Не подошло — написали, вернул. Объяснять и доказывать ничего не нужно.</div>
  <div class="guar__i"><b>Вернулись за три месяца — цена та же</b>Отменили из-за аврала или отпуска, вернулись — платите столько же, сколько платили.</div>
  <div class="guar__i guar__i--hl"><b>Программа открыта до оплаты</b>Двадцать два блока и 216 уроков с названиями видно заранее: вы решаете глазами, а не по обещанию.</div>
</div>

Установка

bukatchuk-ui add guarantee

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

ФайлНазначение
guarantee.cssстили
example.htmlобразец разметки, в проект не копируется
guarantee.jekyll.htmlвставка для Jekyll

Варианты

КлассНазначение
guar__i--hl

Вставка для Jekyll

{%- comment -%}
  Гарантии. Параметр: cards — список с полями title, text, highlight (true — оранжевая карточка).
  Пример: {% include ui/guarantee.html cards=site.data.guarantee.cards %}
{%- endcomment -%}
<div class="guar">
  {%- for c in include.cards %}
  <div class="guar__i{% if c.highlight %} guar__i--hl{% endif %} rv"><b>{{ c.title }}</b>{{ c.text }}</div>
  {%- endfor %}
</div>