Fijn

Teamlist group component: Vertical 

<div class="form-group d-flex flex-wrap  position-relative">
    <label class="flex-grow-1">Teamleden</label>

    <ul class="m-teamList -vertical flex-column position-relative list-unstyled mb-0 w-100 d-flex">

        <li>
            <div tabindex="0" class="a-avatar bg-pistache rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
                HP

            </div>

            <small>Hendrik Pieters</small>
        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-greyblue rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
                PV

            </div>

            <small>Piet van Veen</small>
        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-lightyellow rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
                ED

            </div>

            <small>Eva Dijkstra</small>
        </li>

    </ul>

</div>
 
<div class="form-group d-flex flex-wrap {% if add_single %}align-items-center mb-1 -sideBySide{% endif %} position-relative">
    <label class="{% if add_single %}mb-0{% if info %} d-flex align-items-center{% endif %}{% else %}flex-grow-1{% endif %}">{{label}}{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
    {% if add_single %}
        <div class="m-clearHover{% if selected %} -selected{% endif %} rounded d-flex align-items-center">
            {% if selected %}
                {% render '@avatar--full-name', {initials: "JT", text: "Jappy Toering"}, true %}
                <div class="pl-2 cursor-pointer m-clearHover__cross"><i class="icon-cross"></i></div>
            {% else %}
                {% render '@add-item--no-box', {text:"Eigenaar toevoegen", team:true}, true %}
            {% endif %}
        </div>
    {% else %}
        {% render '@teamlist', {add_button:add_button, vertical:vertical}, true %}
    {% endif %}
</div>
 
{
  "label": "Teamleden",
  "add_button": false,
  "vertical": true,
  "add_single": false,
  "selected": false
}

Teamlist

The teamlist is configured to have a maximum of 4 avatars. Every teammember after these 4 avatars should be added to the popover of the circle that contains the number of teammembers added to this popover. The number of teammembers displayed in the teamlist can be easily increased.

Information about the add team members button

It is important to notice that the add button contains the data-custom-class="-teamSelect" attribute, to apply the correct styling to the popover.