List component


{% if type == "ol" %}<ol{% endif %}{% if type == "ul" %}<ul{% endif %} class="list{% if variant %} list--{{variant}}{% endif %}"{% if id %} id="{{id}}"{% endif %}>
    {% for item in items -%}
    <li class="list__item"{% if item.type %} role="group"{% endif %}>
        {{item.content-}}
        {% if item.type == "ol" %}<ol{% endif %}{% if item.type == "ul" %}<ul{% endif %}{% if item.type %} class="list{% if item.variant %} list--{{item.variant}}{% endif %}"{% endif %}{% if item.id %} id="{{item.id}}"{% endif %}{% if item.type %}>{% endif %}
        {% for item in item.items -%}
            <li class="list__item"{% if item.type %} role="group"{% endif %}>
                {{item.content-}}
                {% if item.type == "ol" %}<ol{% endif %}{% if item.type == "ul" %}<ul{% endif %}{% if item.type %} class="list{% if item.variant %} list--{{item.variant}}{% endif %}"{% endif %}{% if item.id %} id="{{item.id}}"{% endif %}{% if item.type %}>{% endif %}
                {% for item in item.items -%}
                    <li class="list__item"{% if item.type %} role="group"{% endif %}>
                        {{item.content-}}
                        {% if item.type == "ol" %}<ol{% endif %}{% if item.type == "ul" %}<ul{% endif %}{% if item.type %} class="list{% if item.variant %} list--{{item.variant}}{% endif %}"{% endif %}{% if item.id %} id="{{item.id}}"{% endif %}{% if item.type %}>{% endif %}
                        {% for item in item.items -%}
                            <li class="list__item">
                                {{item.content-}}
                            </li>
                        {% endfor -%}
                        {% if item.type == "ol" %}</ol>{% endif %}{% if item.type == "ul" %}</ul>{% endif %}
                    </li>
                {% endfor -%}
                {% if item.type == "ol" %}</ol>{% endif %}{% if item.type == "ul" %}</ul>{% endif %}
            </li>
        {% endfor -%}
        {% if item.type == "ol" %}</ol>{% endif %}{% if item.type == "ul" %}</ul>{% endif %}
    </li>
    {% endfor -%}
{% if type == "ol" %}</ol>{% endif %}{% if type == "ul" %}</ul>{% endif %}



{% include "../../components/molecules/list.html" with {
    type: "ul",
    variant: "ordered",
    items: [
        {
            content: "HTML"
        },
        {
            content: "HTML5"
        },
        {
            content: "CSS"
        },
        {
            content: "CSS3"
        },
        {
            content: "SASS"
        }
    ]
} %}


Image component


<img class="image{% if variant %} image--{{variant}}{% endif %}"{% if id %} id="{{id}}"{% endif %} src="{{source}}" alt="{{alt}}">

{% include "../../components/atoms/image.html" with {
    source: "../../assets/images/content/HTML5-logo.svg",
    alt: "HTML5 logo"
} %}