bukatchuk ui

Блоки

Врезка с меткой

Рамка с оранжевой полосой и подписью сверху: «честно о…» и условия под блоком.

honest с версии 0.1.0

Примеры

Честно
<div class="honest" data-label="Честно">
  <div class="honest__body"><p><strong>Чего у меня нет: отзывов выпускников.</strong> Курс новый, и вы будете одним из первых — цена это отражает.</p></div>
</div>
Оговорка с несколькими абзацами
<div class="cut" data-label="Условия возврата">
  <div class="honest__body">
    <p>Первый месяц возвращается по одному сообщению.</p>
    <p>Если вернулись в течение трёх месяцев — цена остаётся прежней.</p>
  </div>
</div>

Установка

bukatchuk-ui add honest

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

Файлы

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

Варианты

КлассНазначение
honest
cut

Вставка для Jekyll

{%- comment -%}
  Врезка с меткой. Параметры: label (метка), html (текст в HTML), tag (honest | cut, по умолчанию honest).
  Пример: {% include ui/honest.html label=site.data.author.honest.label html=site.data.author.honest.html %}
{%- endcomment -%}
{%- assign kind = include.tag | default: 'honest' -%}
<div class="{{ kind }} rv" data-label="{{ include.label }}"><div class="honest__body">{{ include.html }}</div></div>