Mercedes Pattern Library

Step Line 

<div class="m-step-line">

    <div class="m-step-line__child  m-step-line__child--done">
        Prodotto
    </div>

    <div class="m-step-line__child  m-step-line__child--done">
        Dati Commerciali
    </div>

    <div class="m-step-line__child  m-step-line__child--active">
        Piano finanziario
    </div>

    <div class="m-step-line__child  m-step-line__child--inactive">
        Anagrafica
    </div>

    <div class="m-step-line__child  m-step-line__child--inactive">
        Istruttoria
    </div>

    <div class="m-step-line__child  m-step-line__child--inactive">
        Contratto
    </div>

    <div class="m-step-line__child  m-step-line__child--inactive">
        Finalizzazione
    </div>

</div>
 
<div class="m-step-line">
    {% for item in data %}
        <div class="m-step-line__child  m-step-line__child--{{ item.state }}">
            {{ item.label }}
        </div>
    {% endfor %}
</div>
 
{
  "data": [
    {
      "label": "Prodotto",
      "state": "done"
    },
    {
      "label": "Dati Commerciali",
      "state": "done"
    },
    {
      "label": "Piano finanziario",
      "state": "active"
    },
    {
      "label": "Anagrafica",
      "state": "inactive"
    },
    {
      "label": "Istruttoria",
      "state": "inactive"
    },
    {
      "label": "Contratto",
      "state": "inactive"
    },
    {
      "label": "Finalizzazione",
      "state": "inactive"
    }
  ]
}

There are no notes for this item.