Блоки

Плитки программы

Сетка плиток разного размера: подпись, заголовок, текст и внизу теги, цифра или столбики.

Примеры

<div class="bento">
  <div class="bento-card bento-card--wide bento-card--dark">
    <div class="bento-card__n">BLK 01—07</div>
    <div class="bento-card__t">База: 68 уроков<br>до первого контейнера</div>
    <p class="bento-card__x">Профессия и рабочее место, Linux, Git, Bash, сети от кадра до HTTPS, Python для эксплуатации, приложения и данные.</p>
    <div class="barchart" aria-hidden="true">
      <i class="is-hi" data-ui-h="40%"></i><i class="is-hi" data-ui-h="70%"></i><i class="is-hi" data-ui-h="55%"></i><i class="is-hi" data-ui-h="88%"></i><i class="is-hi" data-ui-h="62%"></i><i data-ui-h="30%"></i><i data-ui-h="44%"></i><i data-ui-h="26%"></i>
    </div>
  </div>
  <div class="bento-card">
    <div class="bento-card__n">BLK 08—12</div>
    <div class="bento-card__t">Контейнеры<br>и автоматизация</div>
    <p class="bento-card__x">Docker, CI/CD, Ansible, облако и Yandex Cloud, инфраструктура как код на Terraform.</p>
    <div class="tags"><span class="tag">Docker</span><span class="tag tag--filled">CI/CD</span><span class="tag">Terraform</span></div>
  </div>
  <div class="bento-card bento-card--safety">
    <div class="bento-card__n">BLK 13—15</div>
    <div class="bento-card__t">Kubernetes</div>
    <p class="bento-card__x">Основы, эксплуатация и управляемый кластер в облаке.</p>
    <div class="bento-card__stat">216<small>урока</small></div>
  </div>
</div>

Установка

bukatchuk-ui add bento

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Плитки программы. Параметр: cards — список с полями n, title_html, text, variant (dark | safety), wide (true),
  bars (список {h: "40%", hi: true}), stat, tags (список {text, style: filled | safety}).
  Пример: {% include ui/bento.html cards=site.data.program.cards %}
{%- endcomment -%}
<div class="bento">
  {%- for c in include.cards %}
  <div class="bento-card{% if c.wide %} bento-card--wide{% endif %}{% if c.variant == 'dark' %} bento-card--dark{% endif %}{% if c.variant == 'safety' %} bento-card--safety{% endif %} rv">
    <div class="bento-card__n">{{ c.n }}</div>
    <div class="bento-card__t">{{ c.title_html }}</div>
    <p class="bento-card__x">{{ c.text }}</p>
    {%- if c.bars %}<div class="barchart" aria-hidden="true">{% for b in c.bars %}<i{% if b.hi %} class="is-hi"{% endif %} data-ui-h="{{ b.h }}"></i>{% endfor %}</div>{% endif %}
    {%- if c.stat %}<div class="bento-card__stat">{{ c.stat }}</div>{% endif %}
    {%- if c.tags %}<div class="tags">{% for t in c.tags %}<span class="tag{% if t.style == 'filled' %} tag--filled{% endif %}{% if t.style == 'safety' %} tag--safety{% endif %}">{{ t.text }}</span>{% endfor %}</div>{% endif %}
  </div>
  {%- endfor %}
</div>