diff --git a/views/snippets/button.twig b/views/snippets/button.twig new file mode 100644 index 0000000..be2bc24 --- /dev/null +++ b/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 %} + + {% if _label %} + + {{ _label }} + + {% endif %} + {% if _icon %} + {% include "@snippets/icon.twig" with { + icon: _icon, + classes: 'c-button_icon', + } only %} + {% endif %} + + {% endblock %} + diff --git a/views/snippets/icon.twig b/views/snippets/icon.twig new file mode 100644 index 0000000..486791d --- /dev/null +++ b/views/snippets/icon.twig @@ -0,0 +1,15 @@ +{# --- Parameters ------------------------- #} + +{% set _icon = icon %} +{% set _classes = classes | default(null) %} +{% set _modifiers = modifiers | default(null) %} + +{# ---------------------------------------- #} + +{% if _icon %} + + + +{% endif %} diff --git a/views/templates/index.twig b/views/templates/index.twig index a63e872..d205c56 100644 --- a/views/templates/index.twig +++ b/views/templates/index.twig @@ -6,6 +6,29 @@ title: Home {% block content %}
-

Hello

+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+

Heading 6

+ +
+ +

+ 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. +

+ +
+ +

Buttons

+ + {% include "@snippets/button.twig" with { + label: 'Button' + } %} + +
+
{% endblock %}