bukatchuk ui

Элементы

Карточка

Рамка с отступами для группы связанных данных; акцентная — с оранжевой рамкой и тенью.

card с версии 0.1.0

Примеры

Карточка

Авторизация

Каждый запрос несёт токен в заголовке. Токен создаётся в кабинете, в разделе «API-токены».

<div class="card">
  <p class="field__label">Авторизация</p>
  <p>Каждый запрос несёт токен в заголовке. Токен создаётся в кабинете, в разделе «API-токены».</p>
</div>
Акцентная

Ссылка на встречу

Отправьте её гостям: вход без регистрации.

<div class="card card--accent">
  <p class="field__label">Ссылка на встречу</p>
  <p>Отправьте её гостям: вход без регистрации.</p>
</div>

Установка

bukatchuk-ui add card

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

Файлы

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

Варианты

КлассНазначение
card--accent

Макрос для Jinja

{#- Карточка; содержимое передаётся блоком caller(). -#}
{% macro card(accent=False) -%}
<div class="card{% if accent %} card--accent{% endif %}">{{ caller() }}</div>
{%- endmacro %}