Fijn

Teamlist group component 

<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>
    
    
</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": 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.