bukatchuk ui

Блоки

Страница 404

Крупное «404», «терминал» с запросом и ответом сервера, пояснение и кнопки.

notfound с версии 0.1.0 со скриптом

Примеры

Страница не найдена
<section class="nf">
  <div class="nf__in">
    <p class="eyebrow">// Ошибка 404</p>
    <div class="nf__top">
      <div>
        <div class="nf__n">404</div>
        <h1 class="nf__h">Страница не найдена</h1>
      </div>
      <div>
        <pre class="nf__term"><span class="g">$</span> curl -sI bukatchuk.ru<span data-ui-path>/этой-страницы-нет</span> | head -1
<span class="a">HTTP/2 404</span>
<span class="g">$</span> curl -sI bukatchuk.ru/ | head -1
<span class="g">HTTP/2 200</span></pre>
        <p class="nf__lead">По этому адресу на сайте ничего нет: в ссылке опечатка или страница переехала. Сам сайт работает: ниже последние статьи, а в архиве — всё с 2015 года.</p>
        <div class="btns nf__btns">
          <a class="btn btn--primary" href="#">На главную</a>
          <a class="btn btn--ghost" href="#">Все статьи</a>
        </div>
      </div>
    </div>
  </div>
</section>
Последние статьи под ошибкой
<section class="sec--hair">
  <div class="wrap">
    <p class="eyebrow">// Свежее</p>
    <h2>Последние статьи</h2>
    <div class="rows nf__rows">
      <a class="row" href="#"><span class="row__d">12.10.2026</span><span class="row__t">Почему реплика PostgreSQL отстаёт на ровном месте</span></a>
      <a class="row" href="#"><span class="row__d">03.10.2026</span><span class="row__t">Алерты, которые будят зря</span></a>
    </div>
  </div>
</section>

Установка

bukatchuk-ui add notfound

Вместе с компонентом установятся: tokens, fonts, base, core, button, tag, post-list.

Файлы

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