Mercedes Pattern Library

Action Controls 

<div class="m-action-controls">

    <div class="m-action-controls__child">

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

        <div class="m-action-controls__child__notification">

            <div class="a-notification">
                3
            </div>

        </div>

    </div>

    <div class="m-action-controls__child">

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

        <div class="m-action-controls__child__notification">

            <div class="a-notification">
                2
            </div>

        </div>

    </div>

    <div class="m-action-controls__child">

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

    </div>

    <div class="m-action-controls__child">

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

    </div>

    <div class="m-action-controls__child">

        <svg class="icon icon--arrow-up f-azure">
  <use xlink:href="../../assets/icons.svg#arrow-up" />
</svg>

    </div>

</div>
 
<div class="m-action-controls">
  {% for item in actions %}
    <div class="m-action-controls__child">
      {% if item.icon %}
        {% render '@icon', { id: item.icon, class: item.class } %}
        {% if item.count %}
          <div class="m-action-controls__child__notification">
            {% render '@notification', { counter: item.count } %}
          </div>
        {% endif %}
      {% endif %}
    </div>
  {% endfor %}
</div>
 
{
  "actions": [
    {
      "icon": "close",
      "count": 3
    },
    {
      "icon": "delete",
      "count": 2
    },
    {
      "icon": "grid"
    },
    {
      "icon": "arrow-down"
    },
    {
      "icon": "arrow-up",
      "class": "f-azure"
    }
  ]
}

There are no notes for this item.