{% extends 'templates/layouts/page.njk' %}

{% set pageConfig = {
  useStyleguide: true
} %}

{% set pageProps = {
  heading: {
    breadcrumbs: [
      { text: 'Home page' },
      { text: 'Typography styles' }
    ],
    title: 'Typography styles'
  }
} %}

{% block main %}
  {% from 'styleguide/sg-section/sg-section.njk' import SGSection, SGRow %}

  {% call SGSection({ title: '', grid: false }) %}
    <h1 class="text-h1">Default H1</h1><br>
    <h2 class="text-h2">Default H2</h2><br>
    <h3 class="text-h3">Default H3</h3>

    {{ Delimiter() }}

    {% call SGRow() %}
      <div>
        <h5 class="text-lg">Text lg</h5>
        <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias consectetur dicta harum laudantium praesentium suscipit vero. Distinctio porro quae repudiandae soluta vero! Ab debitis delectus non quis repellat repudiandae!</p>
      </div>
    {% endcall %}
    {% call SGRow() %}
      <div>
        <h5 class="text-md">Text md</h5>
        <p class="text-md">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias consectetur dicta harum laudantium praesentium suscipit vero. Distinctio porro quae repudiandae soluta vero! Ab debitis delectus non quis repellat repudiandae!</p>
      </div>
    {% endcall %}
    {% call SGRow() %}
      <div>
        <h5 class="text-sm">Text sm</h5>
        <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias consectetur dicta harum laudantium praesentium suscipit vero. Distinctio porro quae repudiandae soluta vero! Ab debitis delectus non quis repellat repudiandae!</p>
      </div>
    {% endcall %}
    {% call SGRow() %}
      <div>
        <h5 class="text-xs">Text xs</h5>
        <p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias consectetur dicta harum laudantium praesentium suscipit vero. Distinctio porro quae repudiandae soluta vero! Ab debitis delectus non quis repellat repudiandae!</p>
      </div>
    {% endcall %}
  {% endcall %}
{% endblock %}