Mercedes Pattern Library

Mercedes Sprint 1 - 8 accordion chiusi 

<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>

            <span class="a-info-auto__data-2">80d Automatic Sport</span>

        </div>

        <div>
            <span class="a-info-auto__data-3">
                Codice Prodotto: 0123456789
            </span>
        </div>

    </div>

</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="m-accordion-trigger">
        <div class="m-accordion-trigger__label">
            Label

        </div>
        <div class="m-accordion-trigger__icons">

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

        </div>
    </div>
</div>
<div class="l-main-wrapper  l-margin-top--small">
    <div class="m-accordion-trigger">
        <div class="m-accordion-trigger__label">
            Label

        </div>
        <div class="m-accordion-trigger__icons">

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

        </div>
    </div>
</div>
<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row">
        <div class="col-4">
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
            <div class="l-margin-top--small">
                <div class="a-input  a-input--select  ">
                    <div class="a-input__label">
                        Label
                    </div>
                    <select name="" id="">
		
			<option value="IVA 22% vendite"> IVA 22% vendite</option>	    
		
			<option value="IVA 10% vendite"> IVA 10% vendite</option>	    
		
	</select>

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

                </div>
            </div>
        </div>

        <div class="col-4">
            <div>
                <div class="a-digit-box  a-digit-box--big">

                    <div class="a-digit-box__main">
                        550,00 €
                    </div>

                    <div class="a-digit-box__secondary">
                        Importo totale <span>(IVA inclusa)</span>
                    </div>

                </div>

            </div>
            <div class="l-margin-top--small">
                <div class="a-digit-box  a-digit-box--big">

                    <div class="a-digit-box__main">
                        550,00 €
                    </div>

                    <div class="a-digit-box__secondary">
                        Importo totale <span>(IVA inclusa)</span>
                    </div>

                </div>

            </div>
            <div class="l-margin-top--small">
                <div class="row">
                    <div class="col-6">
                        <div class="a-digit-box">
                            <div class="a-digit-box__main">
                                550,00 €
                            </div>
                            <div class="a-digit-box__secondary">
                                Importo totale <span>(IVA inclusa)</span>
                            </div>
                        </div>

                    </div>
                    <div class="col-6">
                        <div class="a-digit-box">
                            <div class="a-digit-box__main">
                                550,00 €
                            </div>
                            <div class="a-digit-box__secondary">
                                Importo totale <span>(IVA inclusa)</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="l-white-container">
        <div class="l-main-wrapper">
            <table class="m-financing-table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Percentuale<br>finanziamento</th>
                        <th>Importo<br>finanziato</th>
                        <th>Servizi<br>assicurativi</th>
                        <th>Servizi di <br>accordo assistenza</th>
                        <th>Importo <br>totale</th>
                    </tr>
                </thead>
                <tbody>

                    <tr>
                        <td>
                            <div class="a-onoffswitch">
                                <div class="a-onoffswitch__element">
                                    <input type="checkbox" name="idswitch" class="a-onoffswitch__checkbox" id="idswitch" checked }>
                                    <label class="a-onoffswitch__circle" for="idswitch"></label>
                                </div>

                                <div class="a-onoffswitch__label">
                                    label
                                </div>

                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  ">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="3,90 %">
                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  ">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="6442,00 €">
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td>
                            <div class="a-digit-box  a-digit-box--big">

                                <div class="a-digit-box__main">
                                    100,00 €
                                </div>

                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="a-onoffswitch">
                                <div class="a-onoffswitch__element">
                                    <input type="checkbox" name="idswitch" class="a-onoffswitch__checkbox" id="idswitch" checked }>
                                    <label class="a-onoffswitch__circle" for="idswitch"></label>
                                </div>

                                <div class="a-onoffswitch__label">
                                    label
                                </div>

                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  a-input--disabled">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="3,90 %" disabled>
                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  a-input--disabled">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="6442,00 €" disabled>
                            </div>
                        </td>
                        <td>
                            41,03 €
                        </td>
                        <td>
                            41,03 €
                        </td>
                        <td>
                            <div class="a-digit-box  a-digit-box--big">

                                <div class="a-digit-box__main">
                                    100,00 €
                                </div>

                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="a-onoffswitch">
                                <div class="a-onoffswitch__element">
                                    <input type="checkbox" name="idswitch" class="a-onoffswitch__checkbox" id="idswitch" checked }>
                                    <label class="a-onoffswitch__circle" for="idswitch"></label>
                                </div>

                                <div class="a-onoffswitch__label">
                                    label
                                </div>

                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  a-input--disabled">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="3,90 %" disabled>
                            </div>
                        </td>
                        <td>
                            <div class="a-input  a-input--text  a-input--disabled">
                                <div class="a-input__label">

                                </div>
                                <input type="text" value="6442,00 €" disabled>
                            </div>
                        </td>
                        <td>
                            41,03 €
                        </td>
                        <td>
                            41,03 €
                        </td>
                        <td>
                            <div class="a-digit-box  a-digit-box--big">

                                <div class="a-digit-box__main">
                                    100,00 €
                                </div>

                            </div>

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-middle">
        <div class="col-4">
            <div class="row l-middle">
                <div class="col-6">
                    <div class="a-onoffswitch">
                        <div class="a-onoffswitch__element">
                            <input type="checkbox" name="idswitch" class="a-onoffswitch__checkbox" id="idswitch" checked }>
                            <label class="a-onoffswitch__circle" for="idswitch"></label>
                        </div>

                        <div class="a-onoffswitch__label">
                            label
                        </div>

                    </div>
                </div>
                <div class="col-6">
                    <div class="a-input  a-input--text  a-input--disabled">
                        <div class="a-input__label">

                            &nbsp;

                        </div>
                        <input type="text" value="3,90 %" disabled>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row l-middle">
                <div class="col-6">
                    <div class="a-digit-box">
                        <div class="a-digit-box__main">
                            4,74 %
                        </div>
                        <div class="a-digit-box__secondary">
                            TAEG
                        </div>
                    </div>

                </div>
                <div class="col-6">
                    <div class="a-input  a-input--text  ">
                        <div class="a-input__label">

                            Label

                        </div>
                        <input type="text" value="" placeholder="Label Placeholder">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--small">
    <div class="m-accordion-trigger">
        <div class="m-accordion-trigger__label">
            Label

        </div>
        <div class="m-accordion-trigger__icons">

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

        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--small">
    <div class="m-accordion-trigger">
        <div class="m-accordion-trigger__label">
            Label

        </div>
        <div class="m-accordion-trigger__icons">

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

        </div>
    </div>
</div>

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

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

            <div class="m-action-button m-action-button--active">
                <div class="m-action-button__toggle">
                    <div class="a-button-round a-button-round--active">
                        <svg class="icon icon--close">
  <use xlink:href="../../assets/icons.svg#close" />
</svg>

                    </div>
                </div>

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

                    <div class="m-action-button__menu-items">
                        <a href="#" class="a-link">
	
	Salva ed esci
</a>
                    </div>

                    <div class="m-action-button__menu-items">
                        <a href="#" class="a-link">
	
	Stampa frontalino
</a>
                    </div>

                    <div class="m-action-button__menu-items">
                        <a href="#" class="a-link">
	
	Stampa simulazione
</a>
                    </div>

                    <div class="m-action-button__menu-items">
                        <a href="#" class="a-link">
	
	Salva Offerta
</a>
                    </div>

                    <div class="m-action-button__menu-items">
                        <a href="#" class="a-link">
	
	Completa Preventivo
</a>
                    </div>

                </div>
            </div>

        </div>

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

            <div class="a-button">
                Indietro
            </div>

            <div class="a-button  a-button--azure">
                Avanti
            </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",
        "data_2": "80d Automatic Sport",
        "data_3": "Codice Prodotto: 0123456789"
    } %}
</div>


<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@accordion-trigger' %}
</div>
<div class="l-main-wrapper  l-margin-top--small">
    {% render '@accordion-trigger' %}
</div>
<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row">
        <div class="col-4">
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
        </div>

        <div class="col-4">
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
            <div class="l-margin-top--small">
                {% render '@input--select' %}
            </div>
        </div>

        <div class="col-4">
            <div>
                {% render '@digit-box--big' %}
            </div>
            <div class="l-margin-top--small">
                {% render '@digit-box--big' %}
            </div>
            <div class="l-margin-top--small">
                <div class="row">
                    <div class="col-6">
                        {% render '@digit-box' %}
                    </div>
                    <div class="col-6">
                        {% render '@digit-box' %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% render '@financing-table' %}

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-middle">
        <div class="col-4">
            <div class="row l-middle">
                <div class="col-6">
                    {% render '@onoff-switch' %}
                </div>
                <div class="col-6">
                    {% render '@input--text', {
                        "text": {
                            "value": "3,90 %",
                            "disabled": true
                        }
                    } %}
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row l-middle">
                <div class="col-6">
                    {% render '@digit-box', {
                        "main": "4,74 %",
                        "secondary": "TAEG"
                    } %}
                </div>
                <div class="col-6">
                    {% render '@input--text' %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--small">
    {% render '@accordion-trigger' %}
</div>

<div class="l-main-wrapper  l-margin-top--small">
    {% render '@accordion-trigger' %}
</div>


<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@footer-controls', footerControls %}
</div>
 
{
  "tableList": {
    "header": [
      {
        "label": "CODICE",
        "type": "label"
      },
      {
        "label": "DESCRIZIONE",
        "type": "label"
      },
      {
        "label": "Prezzo (IVA Esclusa)",
        "type": "label"
      },
      {
        "label": "Prezzo (IVA Inclusa)",
        "type": "label"
      },
      {
        "label": "sconto",
        "type": "checkbox"
      },
      {
        "type": "empty"
      }
    ],
    "data": [
      [
        {
          "label": "AC3F",
          "type": "label"
        },
        {
          "label": "Rapporto al ponte i=4,375",
          "type": "label"
        },
        {
          "label": "1.000 €",
          "type": "label"
        },
        {
          "label": "1.500 €",
          "type": "label"
        },
        {
          "label": null,
          "type": "checkbox"
        },
        {
          "label": "Cestina",
          "type": "icon",
          "id": "delete"
        }
      ]
    ]
  },
  "action-button": {
    "actionbuttons": [
      {
        "atom": "link",
        "value": "http://google.it/",
        "label": "Salva ed esci"
      },
      {
        "atom": "link",
        "value": "http://google.it/",
        "label": "Stampa frontalino"
      },
      {
        "atom": "link",
        "value": "http://google.it/",
        "label": "Stampa simulazione"
      },
      {
        "atom": "link",
        "value": "http://google.it/",
        "label": "Salva Offerta"
      },
      {
        "atom": "link",
        "value": "http://google.it/",
        "label": "Completa Preventivo"
      }
    ]
  },
  "footerControls": {
    "left": [
      {
        "atom": "action-button--active",
        "actionbuttons": [
          {
            "atom": "link",
            "value": "http://google.it/",
            "label": "Salva ed esci"
          },
          {
            "atom": "link",
            "value": "http://google.it/",
            "label": "Stampa frontalino"
          },
          {
            "atom": "link",
            "value": "http://google.it/",
            "label": "Stampa simulazione"
          },
          {
            "atom": "link",
            "value": "http://google.it/",
            "label": "Salva Offerta"
          },
          {
            "atom": "link",
            "value": "http://google.it/",
            "label": "Completa Preventivo"
          }
        ]
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

There are no notes for this item.