Mercedes Pattern Library

Mercedes Sprint 1 - 6 

<header class="m-header  m-header--small">
    <a class="m-header__logo" href="#">
        <img src="/assets/images/m-logo.png" alt="">
    </a>

    <div class="m-header__nav">
        <div class="m-header__links">
            <a href="#" class="m-header__link  m-header__link--active">Proposte</a>
            <a href="#" class="m-header__link">Rifinanziamenti</a>
            <a href="#" class="m-header__link">myMobilityPass</a>
            <a href="#" class="m-header__link"><svg class="icon icon--user">
  <use xlink:href="../../assets/icons.svg#user" />
</svg>
</a>
        </div>
    </div>
</header>

<div class="l-main-wrapper  l-margin-top--normal">
    <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>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="a-info-auto">
        <div>

            <span class="a-info-auto__data-1">CLASSE A</span>

        </div>

    </div>

</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="ty-primary">
        Seleziona una versione.
    </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">

            <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-margin-top--normal">
    <table class="m-table-list  m-table-list--row-hover">

        <thead class="m-table-list__header">
            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    CODICE PRODOTTO

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    VERSIONE

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    FUEL

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    LISTINO

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    PREZZO IMPONIBILE

                </td>

            </tr>
        </thead>

        <tbody class="m-table-list__data">

            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="17600209">
                        17600209
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="A200d Automatic 4 MATIC EXECUTIVE">
                        A200d Automatic 4 MATIC EXECUTIVE
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="D">
                        D
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="01-12-2020">
                        01-12-2020
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="31.250,00 €">
                        31.250,00 €
                    </div>

                </td>

            </tr>

        </tbody>

    </table>

</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="m-footer-controls">

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

            <div class="a-button  a-button--transparent">
                Esci
            </div>

        </div>

    </div>

</div>
 
{% render '@header--small' %}

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@step-line'%}
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@info-auto', {
        "data_1": "CLASSE A"
    } %}
</div>


<div class="l-main-wrapper  l-margin-top--normal">
    <div class="ty-primary">
        Seleziona una versione.
    </div>
</div>


{% render '@filter-controls' %}


<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@table-list--hover', tableList %}
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@footer-controls', footerControls %}
</div>
 
{
  "tableList": {
    "header": [
      {
        "label": "CODICE PRODOTTO",
        "type": "label"
      },
      {
        "label": "VERSIONE",
        "type": "label"
      },
      {
        "label": "FUEL",
        "type": "label"
      },
      {
        "label": "LISTINO",
        "type": "label"
      },
      {
        "label": "PREZZO IMPONIBILE",
        "type": "label"
      }
    ],
    "data": [
      [
        {
          "label": "17600209",
          "type": "label"
        },
        {
          "label": "A200d Automatic 4 MATIC EXECUTIVE",
          "type": "label"
        },
        {
          "label": "D",
          "type": "label"
        },
        {
          "label": "01-12-2020",
          "type": "label"
        },
        {
          "label": "31.250,00 €",
          "type": "label"
        }
      ]
    ]
  },
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Esci"
      }
    ]
  }
}

There are no notes for this item.