Fijn

Badge group component 

<div class="m-badgeGroup js-badgeGroup  -lines-1">
    <div class="m-badgeGroup__inner d-flex ">

        <span class="badge -border rounded-pill -left">Inloggen</span>

        <span class="badge -border rounded-pill -left">Bestanden</span>

        <span class="badge -border rounded-pill -left">Notificaties</span>

        <span class="badge -border rounded-pill -left">Ontwikkelingen</span>

        <span class="badge -border rounded-pill -left">CRM</span>

        <span class="badge -border rounded-pill -left">Configurator</span>

    </div>
</div>
 
<div class="m-badgeGroup js-badgeGroup {% if lines %} -lines-{{lines}}{% endif %}">
    <div class="m-badgeGroup__inner d-flex {% if lines > 1 %}flex-wrap{% endif %}">
        {% for badge in badges %}
            {% if badge.length > 0  %}
                {% set text = badge %}
            {% else %}
                {% set text = badge.title %}
                {% set icon = badge.icon %}
            {% endif %}
            {% render '@badge--border', {text:text, border:border, icon:icon, icon_placement:icon_placement}, true %}
        {% endfor %}
    </div>
</div>
 
{
  "lines": 1,
  "badges": [
    "Inloggen",
    "Bestanden",
    "Notificaties",
    "Ontwikkelingen",
    "CRM",
    "Configurator"
  ]
}

No notes defined.