bukatchuk ui

Блоки

Статья

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

article с версии 0.1.0

Примеры

Статья целиком
<article class="article">
  <div class="article__head">
    <p class="eyebrow"><a href="#">Статьи</a> · postgresql</p>
    <h1>Почему реплика PostgreSQL отстаёт на ровном месте</h1>
    <p class="article__meta">
      <time datetime="2026-10-12">12.10.2026</time>
      <span>·</span><span>9 мин чтения</span>
      <span>·</span><span class="is-accent">Эксплуатация</span>
      <span>·</span><span>Олег Букатчук</span>
    </p>
  </div>
  <div class="prose">
    <p>Отставание реплики почти всегда объясняется одной из трёх причин. Разберём каждую и покажем, как её отличить по метрикам.</p>
    <h2>Долгие запросы на реплике</h2>
    <p>Запрос, который идёт дольше допустимого, блокирует применение журнала и копит задержку.</p>
  </div>
  <div class="article__tags">
    <div class="tags"><a class="tag" href="#">postgresql</a><a class="tag" href="#">репликация</a></div>
  </div>
</article>

Установка

bukatchuk-ui add article

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

Файлы

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