Mercedes Pattern Library

Filter Controls 

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="row l-bottom">
        <div class="col-12 m-filter-controlls">

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Tutte</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--filter">
  <use xlink:href="../../assets/icons.svg#filter" />
</svg>

            
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Urgenti</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--chat">
  <use xlink:href="../../assets/icons.svg#chat" />
</svg>

            
            
                <span class="a-filter-button__notification">
                    
    <div class="a-notification bg-azure ">
        3
    </div>

                </span>
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Assegnate a me</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--icon">        
        <svg class="icon icon--pen">
  <use xlink:href="../../assets/icons.svg#pen" />
</svg>

    </span>
</a>

        </div>
    </div>
</div>
 
<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="row l-bottom">
        <div class="col-12 m-filter-controlls">
            {% for item in filterbuttons %}				
                {% render '@' + item.atom, item %}				
			{% endfor %}
        </div>
    </div>
</div>
 
{
  "filterbuttons": [
    {
      "atom": "filter-button",
      "label": "Tutte",
      "icon": {
        "id": "filter"
      },
      "counter": 20
    },
    {
      "atom": "filter-button",
      "label": "Urgenti",
      "icon": {
        "id": "chat",
        "count": 3
      },
      "counter": 20
    },
    {
      "atom": "filter-button",
      "label": "Assegnate a me",
      "icon": null,
      "counter": 20
    },
    {
      "atom": "filter-button--icon",
      "icon": "pen"
    }
  ]
}

There are no notes for this item.