Блоки

Доказательства

Карточки с фактами и ссылками: публикации, открытая программа, опыт автора.

proof с версии 0.1.0

Примеры

Кто автор

<div class="proof">
  <div class="proof__i"><b>Разбор реальной аварии</b><a href="#">«Все компоненты зелёные, а продакшн лежит»</a> — около десяти тысяч читателей на Хабре.</div>
  <div class="proof__i"><b>Открытая программа</b><a href="#">Двадцать два блока и 216 уроков с названиями</a> видно до оплаты.</div>
  <div class="proof__i"><b>Код и интервью</b><a href="#">github.com/olegbukatchuk</a> и интервью «Как хорошо больше не писать код».</div>
  <div class="proof__i"><b>Отрасли</b>Классифайд, e-commerce и госсектор. Каждый проект — больше миллиона пользователей в день.</div>
</div>

Карточка-картинка

<div class="proof">
  <div class="proof__i"><b>Публикация</b>Разбор аварии вышел на Хабре.</div>
  <div class="proof__i proof__i--image"><a href="#"><img class="proof__img" src="proof.png" alt="Снимок публикации"></a></div>
</div>

Установка

bukatchuk-ui add proof

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

Файлы

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

Варианты

Класс	Назначение
`proof__i--image`

Вставка для Jekyll

{%- comment -%}
  Доказательства. Параметры: items — список с полями title, html; image — необязательная карточка-картинка
  (href, src, alt).
  Пример: {% include ui/proof.html items=site.data.author.proof %}
{%- endcomment -%}
<div class="proof">
  {%- for p in include.items %}
  <div class="proof__i rv"><b>{{ p.title }}</b>{{ p.html }}</div>
  {%- endfor %}
  {%- if include.image %}
  <div class="proof__i proof__i--image rv"><a href="{{ include.image.href }}" target="_blank" rel="noopener"><img class="proof__img" src="{{ include.image.src }}" alt="{{ include.image.alt }}"></a></div>
  {%- endif %}
</div>