{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<article class="bp-section bp-font-families">
  <header class="bp-section__header ">
    <h2 class="bp-section__title">Families</h2>
  </header>

  <ul class="bp-font-families__list">
    {% for item in data %}

      <li class="bp-font-families__item">
        <span class="bp-font-family__name">
          {{item.name}}
        </span>

        <p class="bp-font-families__preview" style="{{item.style}}">
          The quick brown fox jumps over the lazy dog
        </p>
      </li>

    {% endfor %}
  </ul>
</article>

{% endmacro %}