bukatchuk ui

Блоки

Текстовая страница

Страница с длинным юридическим текстом: колонка чтения, строка редакции, таблицы и примечание.

textpage с версии 0.1.0

Примеры

Публичная оферта
<section class="textpage">
  <div class="textpage__in">
    <a class="textpage__back" href="#">← На главную</a>
    <h1>Публичная оферта</h1>
    <div class="textpage__meta">Редакция от 01/10/2026 · договор оказания услуг по предоставлению доступа к материалам курса</div>
    <div class="textpage__note"><p><strong>Это черновик, который нужно проверить у юриста.</strong> Всё, что выделено квадратными скобками, заполняется реквизитами исполнителя.</p></div>
    <h2>1. Общие положения</h2>
    <p>1.1. Настоящий документ — публичная оферта индивидуального предпринимателя (далее — Исполнитель) заключить договор оказания услуг на изложенных ниже условиях.</p>
    <p>1.2. Акцептом оферты является оплата услуг любым из способов, указанных в разделе 5. С момента акцепта договор считается заключённым.</p>
    <h3>Тарифы</h3>
    <table>
      <tr><th>Тариф</th><th>Стоимость</th></tr>
      <tr><td>Подписка</td><td>5 000 ₽ в месяц</td></tr>
      <tr><td>Доступ навсегда</td><td>50 000 ₽</td></tr>
    </table>
  </div>
</section>

Установка

bukatchuk-ui add textpage

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

Файлы

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

Вставка для Jekyll

{%- comment -%}
  Текстовая страница (оферта, политика). Используется в макете страницы:
  title, revision, subtitle берутся из front matter, текст — из content.
  Параметры: title, revision, subtitle, back (адрес ссылки «На главную»), content.
  Пример в _layouts/page.html: {% include ui/textpage.html title=page.title revision=page.revision subtitle=page.subtitle content=content %}
{%- endcomment -%}
<section class="textpage">
  <div class="textpage__in">
    <a class="textpage__back" href="{{ include.back | default: '/' | relative_url }}">← На главную</a>
    <h1>{{ include.title }}</h1>
    <div class="textpage__meta">{% if include.revision %}Редакция от {{ include.revision }}{% endif %}{% if include.subtitle %} · {{ include.subtitle }}{% endif %}</div>
    {{ include.content }}
  </div>
</section>