Fijn

Utility bar component 

<div class="component utilityBar o-utilityBar">
    <div class="o-utilityBar__parts d-flex flex-column flex-lg-row h-100 justify-content-xl-between align-items-lg-center">

        <div class="o-utilityBar__first pr-xl-3">
            <ul class="nav nav-tabs m-tabs bg-white position-relative">

                <li class="nav-item active">
                    <a href="javascript:void(0)" class="nav-link">Item 1</a>
                </li>

                <li class="nav-item">
                    <a href="javascript:void(0)" class="nav-link">Item 2</a>
                </li>

                <li class="nav-item">
                    <a href="javascript:void(0)" class="nav-link">Item 3</a>
                </li>

                <li class="nav-item">
                    <a href="javascript:void(0)" class="nav-link">Item 4</a>
                </li>

                <div class="nav-line"></div>
            </ul>

        </div>

    </div>
</div>
 
<div class="component utilityBar o-utilityBar{% if filter_type %} -updates d-none d-lg-flex justify-content-end{% endif %}">
    <div class="o-utilityBar__parts d-flex flex-column flex-lg-row h-100 justify-content-xl-between align-items-lg-center{% if filter_type %} w-100{% endif %}">
        {% if not filter_type %}
            <div class="o-utilityBar__first pr-xl-3">
                    {% render '@'+handle1, {items: items}, true %}
            </div>
        {% endif %}
        {% if (handle2) or (handle3) or (handle4) %}
            <div class="{% if filter_type %}o-utilityBar__row w-100 d-none d-lg-flex justify-content-end align-items-center{% else %}o-utilityBar__last{% endif %}">
                <div class="mr-3">
                    {% if not updates %}
                        {% render '@'+handle2, {text: "Filter op fase", text_mobile: "Fase", icon: "filter-alt", search: false, phase: true} %}
                    {% endif %}
                </div>
                <div class="mr-3">
                    {% if updates %}
                        {% render '@'+handle3 %}
                    {% else %}
                        {% render '@'+handle3, {text: "Filter op teamleden",text_mobile: "Teamleden", icon: "profile", search: true, team: true}, true  %}
                    {% endif %}
                </div>
                {% render '@'+handle4 %}
            </div>
        {% endif %}
    </div>
</div>
 
{
  "handle1": "tabs--utility-bar",
  "handle2": ""
}

No notes defined.