Блоки

Лента показателей

Четыре ячейки с числами и подписями в общей рамке; разные цвета ячеек и реакция на наведение.

Примеры

<div class="ribbon">
  <div class="ribbon__i"><div class="ribbon__n">19</div><div class="ribbon__l">лет в эксплуатации</div></div>
  <div class="ribbon__i"><div class="ribbon__n">99,95%</div><div class="ribbon__l">доступность за год</div></div>
  <div class="ribbon__i"><div class="ribbon__n">340</div><div class="ribbon__l">серверов под присмотром</div></div>
  <div class="ribbon__i"><div class="ribbon__n">148</div><div class="ribbon__l">публикаций с 2015 года</div></div>
</div>

Установка

bukatchuk-ui add ribbon

Файлы

Вставка для Jekyll

{%- comment -%}
  Лента показателей. Параметр items — список пар {n, l}: число и подпись (например site.home.facts).
  Четыре ячейки оформлены под четыре места; для другого числа ячеек проверьте вид.
{%- endcomment -%}
<div class="ribbon">
  {%- for f in include.items %}
  <div class="ribbon__i"><div class="ribbon__n">{{ f.n }}</div><div class="ribbon__l">{{ f.l }}</div></div>
  {%- endfor %}
</div>