Блоки

Призыв к действию

Оранжевая секция с заголовком, текстом, чёрной кнопкой и необязательной оговоркой; перед оранжевым подвалом — чёрный вариант с оранжевой кнопкой.

cta с версии 0.1.0

Примеры

Призыв к действию

<section class="cta">
  <div class="wrap">
    <span class="label rv">Призыв к действию</span>
    <h2>Первая неделя — и у вас работает собственный стенд</h2>
    <p>Оформите подписку — доступ ко всем блокам открывается сразу. Первым делом откройте маршрут «первая неделя»: через семь дней у вас будет собранное рабочее место инженера.</p>
    <div class="btns"><a class="btn" href="#">Оформить подписку <span class="ph">[ССЫЛКА ОПЛАТЫ]</span></a></div>
  </div>
</section>

Чёрная перед подвалом

<section class="cta cta--dark">
  <div class="wrap">
    <span class="label">Дальше</span>
    <h2>Каталог с живыми примерами</h2>
    <p>У каждого компонента — живые примеры, разметка, варианты и клавиши.</p>
    <div class="btns"><a class="btn" href="#">Открыть каталог</a></div>
  </div>
</section>

Название продукта одной строкой

<section class="cta">
  <div class="wrap">
    <h2 class="cta__title--nowrap">База, которую не придётся доучивать</h2>
    <p>Курс DevOps-инженера с нуля до первого дежурства.</p>
    <div class="btns"><a class="btn" href="#">Смотреть программу</a></div>
  </div>
</section>

С оговоркой

<section class="cta cta--wide">
  <div class="wrap">
    <div class="eyebrow">// Последний шаг</div>
    <h2>Забронируйте место на ближайший поток</h2>
    <p>Мест ограниченное число: на каждый разбор нужен собственный стенд.</p>
    <div class="btns"><a class="btn" href="#">Занять место</a></div>
    <div class="cut" data-label="Условие"><div class="honest__body"><p>Возврат — в течение 14 дней после оплаты, без объяснения причин.</p></div></div>
  </div>
</section>

Установка

bukatchuk-ui add cta

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

Файлы

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

Варианты

Класс	Назначение
`cta--dark`
`cta--wide`
`cta__title--nowrap`

Вставка для Jekyll

{%- comment -%}
  Призыв к действию. Параметры: id, blk (метка), eyebrow, title, text, button (href, text_html),
  cut (label, html — оговорка внизу), nowrap (true — заголовок одной строкой), wide (true — заголовок на всю ширину),
  dark (true — чёрная секция с оранжевой кнопкой; ставьте перед подвалом).
  Пример: {% include ui/cta.html blk=d.blk title=d.title text=d.text button=d.button %}
{%- endcomment -%}
<section class="cta{% if include.dark %} cta--dark{% endif %}{% if include.wide %} cta--wide{% endif %}"{% if include.id %} id="{{ include.id }}"{% endif %}>
  <div class="wrap">
    {%- if include.blk %}<span class="label rv">{{ include.blk }}</span>{% endif %}
    {%- if include.eyebrow %}<div class="eyebrow">{{ include.eyebrow }}</div>{% endif %}
    <h2 class="rv{% if include.nowrap %} cta__title--nowrap{% endif %}">{{ include.title }}</h2>
    <p class="rv">{{ include.text }}</p>
    {%- if include.button %}
    <div class="btns rv"><a class="btn" href="{{ include.button.href }}">{{ include.button.text_html }}</a></div>
    {%- endif %}
    {%- if include.cut %}
    <div class="cut rv" data-label="{{ include.cut.label }}"><div class="honest__body">{{ include.cut.html }}</div></div>
    {%- endif %}
  </div>
</section>