Блоки

Бонусы и возможности

Карточки с подписью, заголовком, списком и итогом: бонусы к подписке, возможности продукта.

Примеры

<div class="feats">
  <div class="feat">
    <div>
      <div class="feat__id">Бонус 1</div>
      <h3>Маршрут<br>«первая неделя»</h3>
      <p class="feat__x">Главная причина, по которой обучение бросают, — первый результат стоит слишком далеко. Здесь он стоит на седьмом дне.</p>
      <ul>
        <li>что сделать в каждый из семи вечеров</li>
        <li>три стенда: локальный, VPS и облако</li>
        <li>рассчитано на четыре часа в неделю, а не на отпуск</li>
      </ul>
    </div>
    <div class="feat__res"><strong>Результат:</strong> через неделю у вас собранное рабочее место инженера.<div class="feat__anchor">Собрать на рынке: 15 000 ₽ — онбординг-воркшоп</div></div>
  </div>
  <div class="feat feat--dark">
    <div>
      <div class="feat__id">Бонус 2</div>
      <h3>«Радар технологий<br>квартала»</h3>
      <p class="feat__x">Раз в квартал — короткий разбор того, что действительно входит в вакансии и в инциденты.</p>
    </div>
    <div class="feat__stat">4<small>выпуска в год</small></div>
  </div>
  <div class="feat feat--safety">
    <div>
      <div class="feat__id">Бонус 3</div>
      <h3>Критерии готовности</h3>
      <p class="feat__x">После каждого блока — проверка, что результат работает.</p>
    </div>
    <div class="tags"><span class="tag tag--filled">Проверки</span><span class="tag">Чек-листы</span></div>
  </div>
</div>

Установка

bukatchuk-ui add features

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Бонусы и возможности. Параметр: items — список с полями id, title_html, text, bullets (список строк),
  result, anchor, stat_html, tags (список {text, style}), variant (dark | safety).
  Пример: {% include ui/features.html items=site.data.bonuses.items %}
{%- endcomment -%}
<div class="feats">
  {%- for x in include.items %}
  <div class="feat{% if x.variant == 'dark' %} feat--dark{% endif %}{% if x.variant == 'safety' %} feat--safety{% endif %} rv">
    <div>
      <div class="feat__id">{{ x.id }}</div>
      <h3>{{ x.title_html }}</h3>
      <p class="feat__x">{{ x.text }}</p>
      {%- if x.bullets %}<ul>{% for b in x.bullets %}<li>{{ b }}</li>{% endfor %}</ul>{% endif %}
    </div>
    {%- if x.result %}<div class="feat__res"><strong>Результат:</strong> {{ x.result }}{% if x.anchor %}<div class="feat__anchor">{{ x.anchor }}</div>{% endif %}</div>{% endif %}
    {%- if x.stat_html %}<div class="feat__stat">{{ x.stat_html }}</div>{% endif %}
    {%- if x.tags %}<div class="tags">{% for t in x.tags %}<span class="tag{% if t.style == 'filled' %} tag--filled{% endif %}{% if t.style == 'safety' %} tag--safety{% endif %}">{{ t.text }}</span>{% endfor %}</div>{% endif %}
  </div>
  {%- endfor %}
</div>