Mercedes Pattern Library

Mercedes Sprint 1 - 10 

<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">
    <div class="m-recap-header">
        <div class="m-recap-header__info">
            <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>
                    <span class="a-info-auto__data-4">
                DIEGO BERTOLINI - Persona fisica
            </span>
                </div>

            </div>

        </div>

        <div class="m-recap-header__data">

            <div>
                <strong>
					finanziamento balloon
				</strong>
                <span>
					36 mesi
				</span>
            </div>

            <div>
                <strong>
					finanziamento balloon
				</strong>
                <span>
					36 mesi
				</span>
            </div>

            <div>
                <strong>
					finanziamento balloon
				</strong>
                <span>
					36 mesi
				</span>
            </div>

            <div>
                <strong>
					finanziamento balloon
				</strong>
                <span>
					36 mesi
				</span>
            </div>

        </div>
    </div>

</div>

<div class="l-main-wrapper l-margin-top--normal">
    <div class="ty-primary">
        Inserisci un nuovo soggetto.
    </div>
</div>

<div class="l-main-wrapper l-margin-top--normal">
    <div class="m-question-row">
        <div class="row l-middle">
            <div class="col-9">
                <div class="m-question-row__question  ty-body">
                    Il soggetto vuole acquistare con Partita IVA?
                </div>
            </div>

            <div class="col-3">
                <div class="m-question-row__answers l-between">

                    <div>

                        <div class="m-question-row__radio">
                            <label class="a-radio">
    <input type="radio">
    <span></span>
    
    	Sì
    
</label>
                        </div>

                        <div class="m-question-row__radio">
                            <label class="a-radio">
    <input type="radio">
    <span></span>
    
    	No
    
</label>
                        </div>

                    </div>
                </div>
            </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">
    {% render '@recap-header' %}
</div>

<div class="l-main-wrapper l-margin-top--normal">
    <div class="ty-primary">
        Inserisci un nuovo soggetto.
    </div>
</div>

<div class="l-main-wrapper l-margin-top--normal">
    {% render '@question-row', {
        "question": "Il soggetto vuole acquistare con Partita IVA?",
        "answers": [
            {
              "value": "Sì"
            },
            {
              "value": "No"
            }
        ]
    } %}
</div>
 
{
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Salva ed esci"
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

There are no notes for this item.