Блоки

Первый экран

Крупный заголовок на фоне-сетке, оранжевое акцентное слово, подписи и кнопки.

Примеры

<section class="hero">
  <div class="hero__in">
    <p class="eyebrow">// Олег Букатчук · надёжность и эксплуатация</p>
    <h1>Заметки инженера,<br>который чинит продакшн 19&nbsp;лет</h1>
    <p class="hero__sub">Разборы аварий, эксплуатация нагруженных систем и то, что об этом не пишут в документации.</p>
    <div class="hero__meta">
      <span>148 публикаций</span>
      <span>Первая — 2015 год</span>
      <span>Читают в Хабре и Телеграме</span>
    </div>
  </div>
</section>

<section class="hero">
  <div class="hero__in">
    <p class="eyebrow">// Курс DevOps-инженера</p>
    <h1>Эксплуатация <span class="acc">нагруженных систем</span> без ночных звонков</h1>
    <p class="hero__sub">Десять блоков: от Linux и сетей до наблюдаемости, отказоустойчивости и разбора аварий. Практика на реальных стендах.</p>
    <div class="hero__meta"><span>Набор открыт</span><span>Старт в ноябре</span></div>
    <div class="btns hero__actions">
      <a class="btn btn--primary" href="#">Записаться</a>
      <a class="btn btn--ghost" href="#">Программа</a>
    </div>
  </div>
</section>

Установка

bukatchuk-ui add hero

Файлы

Вставка для Jekyll

{%- comment -%}
  Первый экран. Параметры:
    eyebrow — надпись над заголовком (без «//», она добавляется);
    title — заголовок (допустим HTML: <br>, <span class="acc">…</span>);
    lead — подзаголовок; meta — строка из подписей через «|»;
    actions — HTML кнопок под подписями.
{%- endcomment -%}
<section class="hero">
  <div class="hero__in">
    {%- if include.eyebrow %}
    <p class="eyebrow">// {{ include.eyebrow }}</p>
    {%- endif %}
    <h1>{{ include.title }}</h1>
    {%- if include.lead %}
    <p class="hero__sub">{{ include.lead }}</p>
    {%- endif %}
    {%- if include.meta %}
    <div class="hero__meta">
      {%- assign items = include.meta | split: '|' %}
      {%- for m in items %}<span>{{ m | strip }}</span>{% endfor %}
    </div>
    {%- endif %}
    {%- if include.actions %}
    <div class="btns hero__actions">{{ include.actions }}</div>
    {%- endif %}
  </div>
</section>

Макрос для Jinja

{#- Первый экран. eyebrow без «//»; title допускает HTML (<br>, <span class="acc">…</span>),
    поэтому передавайте только доверенный текст; meta — список подписей.
    Содержимое блока caller() (кнопки) попадает под подписи. -#}
{% macro hero(title, eyebrow=None, lead=None, meta=None) -%}
<section class="hero">
  <div class="hero__in">
    {%- if eyebrow %}
    <p class="eyebrow">// {{ eyebrow }}</p>
    {%- endif %}
    <h1>{{ title|safe }}</h1>
    {%- if lead %}
    <p class="hero__sub">{{ lead }}</p>
    {%- endif %}
    {%- if meta %}
    <div class="hero__meta">{% for m in meta %}<span>{{ m }}</span>{% endfor %}</div>
    {%- endif %}
    {%- if caller %}
    <div class="btns hero__actions">{{ caller() }}</div>
    {%- endif %}
  </div>
</section>
{%- endmacro %}