Patterns

Home 

<div class="master">
    <div class="master__content">
        <header class="site-header">
            <div class="container">
                <h1 class="site-header__title">Patterns</h1>
            </div>
        </header>

        <main>

            <div class="container">
                <h2>The quick brown fox jumps over the lazy dog</h2>
                <p class="mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Nihil, neque ipsa! Maiores, molestias dicta. Ad, voluptatum assumenda
                    perferendis facere, voluptatem odio laborum, repellat sint laudantium
                    labore non cumque eaque tempore!</p>
                <h3>The five boxing wizards jump quickly</h3>
                <p class="mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Nihil, neque ipsa! Maiores, molestias dicta. Ad, voluptatum assumenda
                    perferendis facere, voluptatem odio laborum, repellat sint laudantium
                    labore non cumque eaque tempore!</p>

                <h4>Example of a list element</h4>
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Cupiditate ratione eos quo?</li>
                    <li>Aliquid ipsum fugit porro.</li>
                    <li>Quasi rem placeat quod!</li>
                </ul>
                <button class="button mt-4">
                    Button <svg class="icon icon--chevron-right ml-1">
                        <use xlink:href="../../assets/icons.svg#chevron-right" />
                    </svg>

                </button>
            </div>

        </main>
    </div>
    <div class="master__footer">
        <div class="mt-8">
            <footer class="site-footer ">
                <div class="container">
                    2020 Copyright
                </div>
            </footer>
        </div>
    </div>
</div>
 
{% extends "@page-layout" %}

{% block main %}
<div class="container">
  <h2>The quick brown fox jumps over the lazy dog</h2>
  <p class="mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Nihil, neque ipsa! Maiores, molestias dicta. Ad, voluptatum assumenda
    perferendis facere, voluptatem odio laborum, repellat sint laudantium
    labore non cumque eaque tempore!</p>
  <h3>The five boxing wizards jump quickly</h3>
  <p class="mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Nihil, neque ipsa! Maiores, molestias dicta. Ad, voluptatum assumenda
    perferendis facere, voluptatem odio laborum, repellat sint laudantium
    labore non cumque eaque tempore!</p>

  <h4>Example of a list element</h4>
  <ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate ratione eos quo?</li>
    <li>Aliquid ipsum fugit porro.</li>
    <li>Quasi rem placeat quod!</li>
  </ul>
  <button class="button mt-4">
    Button {% render '@icon', { id: 'chevron-right', class: 'ml-1' } %}
  </button>
</div>
{% endblock %}
 
/* No context defined. */

No notes defined.