Элементы

Список записей

Вертикальный список записей с заголовком, пояснением, ссылкой и кнопками действий; прошедшие — приглушены.

Примеры

<ul class="items">
  <li class="item">
    <div class="item__main">
      <h3 class="item__title">Планёрка отдела разработки</h3>
      <p class="item__meta">14/10/2026 10:00 · 60 минут</p>
      <p class="item__link"><a class="link" href="#">meet.bukatchuk.ru/planerka</a></p>
    </div>
    <div class="item__actions">
      <a class="btn btn--sm btn--primary" href="#">Войти</a>
      <a class="btn btn--sm btn--ghost" href="#">Изменить</a>
      <button class="btn btn--sm btn--danger" type="button">Удалить</button>
    </div>
  </li>
  <li class="item item--past">
    <div class="item__main">
      <h3 class="item__title">Разбор инцидента</h3>
      <p class="item__meta">08/10/2026 15:30 · 45 минут</p>
    </div>
  </li>
</ul>

Установка

bukatchuk-ui add item-list

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Запись списка (внутри <ul class="items">). Параметры: title, meta, link, past.
{%- endcomment -%}
<li class="item{% if include.past %} item--past{% endif %}">
  <div class="item__main">
    <h3 class="item__title">{{ include.title }}</h3>
    {%- if include.meta %}<p class="item__meta">{{ include.meta }}</p>{% endif %}
    {%- if include.link %}<p class="item__link"><a class="link" href="{{ include.link }}">{{ include.link }}</a></p>{% endif %}
  </div>
</li>

Макрос для Jinja

{#- Запись списка. title, meta, link — текст; кнопки действий передаются блоком caller(). Оборачивается в <ul class="items">. -#}
{% macro item(title, meta='', link='', past=False) -%}
<li class="item{% if past %} item--past{% endif %}">
  <div class="item__main">
    <h3 class="item__title">{{ title }}</h3>
    {%- if meta %}<p class="item__meta">{{ meta }}</p>{% endif %}
    {%- if link %}<p class="item__link"><a class="link" href="{{ link }}">{{ link }}</a></p>{% endif %}
  </div>
  {%- if caller %}<div class="item__actions">{{ caller() }}</div>{% endif %}
</li>
{%- endmacro %}