Fijn

Teamlist component 

<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>
 
<ul class="m-teamList{% if vertical %} -vertical flex-column{% endif %} position-relative list-unstyled mb-0 w-100 d-flex">
    {% if vertical %}
        <li>{% render "@avatar", {initials:"HP",color:"pistache"}, true %} <small>Hendrik Pieters</small></li>
        <li>{% render "@avatar", {initials:"PV",color:"greyblue"}, true %} <small>Piet van Veen</small></li>
        <li>{% render "@avatar", {initials:"ED",color:"lightyellow"}, true %} <small>Eva Dijkstra</small></li>
    {% else %}
    <li>{% render '@avatar', {initials: "FC", color:"greenblue", tooltip_html:"<small class='d-block text-center'><strong>Frans Canten</strong><br><span class='text-muted'>Accountmanager</span></small>"}, true %}</li>
    <li>{% render '@avatar', {initials: "BK", color:"bronze", tooltip_html:"<small class='d-block text-center'><strong>Britt Kaag</strong><br><span class='text-muted'>Projectmanager</span></small>"}, true %}</li>
    <li>{% render '@avatar', {initials: "LM", color:"darkblue", tooltip_html:"<small class='d-block text-center'><strong>Luuk Maartens</strong><br><span class='text-muted'>Architect</span></small>"}, true %}</li>
    <li>{% render '@avatar', {initials: "TR", color:"brightpink", tooltip_html:"<small class='d-block text-center'><strong>Thomas Rademakers</strong><br><span class='text-muted'>Architect</span></small>"}, true %}</li>
    <li>{% render '@avatar', {initials: "+3", color:"defaultgray", tooltip_html:"teammembers" }, true %}</li>
    {% if add_button %}<li class="ml-1">{% render '@circle--avatar' %}</li>{% endif %}
    {% endif %}
</ul>
 
{
  "vertical": false
}

No notes defined.