---
data:
  type: hash
locale:
  type: string
i18n:
  type: hash
---
{% for font in data.bootstrap.fonts %}
  {%- assign slug = font | slugify -%}
  <section class="font-{{ slug }} mt-5">
    <header>
      <h3>
        <code>font-{{ slug }}</code> {{ i18n.lorem_ipsum.five_words }}
      </h3>

      <p class="lead">
        <code>font-{{ slug }}</code> is a utility class you can use when you want an element to use the {{ font }} font
        family.
      </p>
    </header>

    <div class="content">
      <p>
        <em>
          {{- i18n.lorem_ipsum.twenty_words -}}
        </em>
      </p>

      <p>
        <strong>
          {{- i18n.lorem_ipsum.twenty_words -}}
        </strong>
      </p>

      <p>{{- i18n.lorem_ipsum.one_paragraph -}}</p>
    </div>
  </section>
{% endfor %}

{% for font_family in data.bootstrap.variables.font_families %}
  <section class="font-family-{{ font_family[0] }} mt-5">
    <header>
      <h3>
        <code>font-{{ font_family[0] }}</code> {{ i18n.lorem_ipsum.five_words }}
      </h3>

      <p class="lead">
        <code>font-{{ font_family[0] }}</code> is a utility class you can use when you want an element to use the
        {{ font_family[1] }} font family.
      </p>

      <p class="lead">
        Since it's a generically named utility, you can redefine the font family by changing it on
        <code>_data/bootstrap/variables.yml</code>, or add more, even. This is useful for themes, since you can allow
        users to customize the font families.
      </p>
    </header>

    <div class="content">
      <p>
        <em>
          {{- i18n.lorem_ipsum.twenty_words -}}
        </em>
      </p>

      <p>
        <strong>
          {{- i18n.lorem_ipsum.twenty_words -}}
        </strong>
      </p>

      <p>{{- i18n.lorem_ipsum.one_paragraph -}}</p>
    </div>
  </section>
{% endfor %}