Fijn

Teamlist component: Vertical 

<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>
 
<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": true
}

No notes defined.