Fijn

Team select component 

<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 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">
        {% for item in items %}
            <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">{% render '@avatar--full-name', {initials:item.initials, color:item.color, text:item.name} %}</li>
        {% endfor %}
    </ul>
</div>
 
{
  "items": [
    {
      "initials": "MV",
      "name": "Marcella Vonk",
      "color": "default"
    },
    {
      "initials": "DW",
      "name": "Daniëlle van der Wei",
      "color": "turquoise"
    },
    {
      "initials": "FA",
      "name": "Ferry van Asperen",
      "color": "pink"
    },
    {
      "initials": "IP",
      "name": "Isabel Pedersen",
      "color": "green"
    },
    {
      "initials": "RG",
      "name": "Robert Giezen",
      "color": "blue"
    },
    {
      "initials": "JT",
      "name": "Jappy Toering",
      "color": "orange"
    },
    {
      "initials": "RV",
      "name": "Ruerd Visser",
      "color": "lightgreen"
    },
    {
      "initials": "RW",
      "name": "Robin Woudstra",
      "color": "lightpink"
    }
  ]
}

No notes defined.