Fijn

Teamlist group component: With Add Button 

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

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

        <li>
            <div tabindex="0" class="a-avatar bg-greenblue rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Frans Canten&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                FC

            </div>

        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-bronze rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Britt Kaag&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Projectmanager&lt;/span&gt;&lt;/small&gt;">
                BK

            </div>

        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-darkblue rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Luuk Maartens&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Architect&lt;/span&gt;&lt;/small&gt;">
                LM

            </div>

        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-brightpink rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Thomas Rademakers&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Architect&lt;/span&gt;&lt;/small&gt;">
                TR

            </div>

        </li>
        <li>
            <div tabindex="0" class="a-avatar bg-defaultgray rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content='<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>'">
    +3
    
</div>

</li>
    <li class=" ml-1">
                <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-custom-class="-teamSelect">
                    <i class="icon-plus"></i>

                </div>

                <div class="popover-content">

                    <div class="m-searchInput">
                        <span class="d-block d-xxxxl-none">
                            <input type="search" class="form-control" id="search" placeholder="Zoeken">
                        </span>
                        <span class="d-none d-xxxxl-block">
                            <input type="search" class="form-control" id="search" placeholder="Zoeken">
                        </span>
                        <i class=" icon-search cursor-pointer"></i>
                    </div>
                    <div class="m-teamSelect js-teamSelect">
                        <i class="m-teamSelect__noresults">No matching results</i>
                        <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
                            </li>

                            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
                            </li>

                        </ul>
                    </div>

                </div>
        </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": true,
  "vertical": false,
  "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.