Add basic styleguide to index

Add default button snippet
Add default icon snippet

views/snippets/button.twig

@@ -0,0 +1,43 @@
+{# --- Parameters ------------------------- #}
+
+{% set _tag             = tag | default('button') %}
+{% set _href            = href | default(null) %}
+{% set _external        = external ?? false %}
+{% set _classes         = classes | default(null) %}
+{% set _modifiers       = modifiers | default(null) %}
+{% set _label           = label | default(null) %}
+{% set _icon            = icon | default(null) %}
+{% set _attr            = attr | default(null) %}
+
+{# --- Computed --------------------------- #}
+
+{% if _href != null %}
+    {% set _tag = 'a' %}
+{% elseif _tag == 'a' %}
+    {% set _tag = 'span' %}
+{% endif %}
+
+{# ---------------------------------------- #}
+
+<{{ _tag }}
+    class="c-button {{ _classes }} {{ _modifiers }}"
+    {% if _href %}href="{{ _href }}"{% endif %}
+    {% if _external %}target="_blank" rel="noopener noreferrer" data-load="false"{% endif %}
+    {% if _attr %}{{  _attr | raw }}{% endif %}
+>
+    {% block inner %}
+        <span class="c-button_inner">
+            {% if _label %}
+                <span class="c-button_label">
+                    {{ _label }}
+                </span>
+            {% endif %}
+            {% if _icon %}
+                {% include "@snippets/icon.twig" with {
+                    icon: _icon,
+                    classes: 'c-button_icon',
+                } only %}
+            {% endif %}
+        </span>
+    {% endblock %}
+</{{ _tag }}>

views/snippets/icon.twig

@@ -0,0 +1,15 @@
+{# --- Parameters ------------------------- #}
+
+{% set _icon        = icon %}
+{% set _classes     = classes | default(null) %}
+{% set _modifiers   = modifiers | default(null) %}
+
+{# ---------------------------------------- #}
+
+{% if _icon %}
+    <span class="o-icon {{ _classes }} {{ _modifiers }}">
+        <svg class="svg-{{ _icon }}" focusable="false" aria-hidden="true">
+            <use xlink:href="#{{ _icon }}"></use>
+        </svg>
+    </span>
+{% endif %}

views/templates/index.twig

@@ -6,6 +6,29 @@ title: Home
 
 {% block content %}
     <div class="o-container">
-        <h1 class="c-heading -h1">Hello</h1>
+
+        <h1 class="c-heading -h1">Heading 1</h1>
+        <h1 class="c-heading -h2">Heading 2</h1>
+        <h1 class="c-heading -h3">Heading 3</h1>
+        <h1 class="c-heading -h4">Heading 4</h1>
+        <h1 class="c-heading -h5">Heading 5</h1>
+        <h1 class="c-heading -h6">Heading 6</h1>
+
+        <hr>
+
+        <p class="c-text -body-regular" style="max-width: 500px">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam libero, sit pariatur voluptatum amet magni odio ducimus! Saepe facere iste porro voluptatem. Tenetur perferendis ea a quasi vitae! Ullam, blanditiis.
+        </p>
+
+        <hr>
+
+        <p class="c-text -body-regular">Buttons</p>
+
+        {% include "@snippets/button.twig" with {
+            label: 'Button'
+        } %}
+
+        <hr>
+
     </div>
 {% endblock %}