Mercedes Sprint 1 - 20

WIP

HTML
View
Context
Info
Notes


        
        <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">
    <div class="m-notification  m-notification--alert">
        <div class="m-notification__icon">
            <svg class="icon icon--alert">
  <use xlink:href="../../assets/icons.svg#alert" />
</svg>

        </div>
        <div class="m-notification__text">
            È obbligatorio consegnare al cliente, insieme al contratto, il documento di sintesi aggiornato. Eventuali altri documenti di sintesi consegnati in giorni precedenti a quello di stipula non sono da ritenersi più validi.
        </div>
        <div class="m-notification__cta">
            Chiudi
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-bottom">
        <div class="col">
            <div class="ty-primary">
                Dati per la richiesta di numerazione.
            </div>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-bottom">
        <div class="col-4">
            <div class="a-input  a-input--text  ">
                <div class="a-input__label">

                    Label

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

        </div>
        <div class="col-4">

            <label class="a-checkbox " for="field-id-5306">
    <input type="checkbox"   id="field-id-5306">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

        </div>

    </div>
</div>

<div class="l-main-wrapper  l-margin-top--big">
    <div class="ty-primary">
        Dati per la stampa del contratto.
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row">
        <div class="col-4">
            <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="col-4">
            <div class="row">
                <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 class="a-input__icon">
                            <svg class="icon icon--calendar">
  <use xlink:href="../../assets/icons.svg#calendar" />
</svg>

                        </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 class="a-input__icon">
                            <svg class="icon icon--calendar">
  <use xlink:href="../../assets/icons.svg#calendar" />
</svg>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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">
                    Modalità di firma
                </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>
    
    	Cartacea
    
</label>
                        </div>

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

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

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

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

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

            <div class="a-button  a-button--transparent">
                Stampa contratto
            </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">
    {% render '@recap-header' %}
</div>

<div class="l-main-wrapper">
    {% render '@notification-banner' %}
</div>



<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-bottom">
        <div class="col">
            <div class="ty-primary">
                Dati per la richiesta di numerazione.
            </div>
        </div>
    </div>
</div>


<div class="l-main-wrapper  l-margin-top--normal">
    <div class="row l-bottom">
        <div class="col-4">
            {% render '@input--text' %}
        </div>
        <div class="col-4">
            {% render '@checkbox' %}
        </div>

    </div>
</div>



<div class="l-main-wrapper  l-margin-top--big">
    <div class="ty-primary">
        Dati per la stampa del contratto.
    </div>
</div>

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

        <div class="col-4">
            <div class="row">
                <div class="col-6">
                    {% render '@input--icon' %}
                </div>
                <div class="col-6">
                    {% render '@input--icon' %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@question-row', {
      "question": "Modalità di firma",
      "answers": [
        {
          "value": "Cartacea"
        },
        {
          "value": "Digitale"
        },
        {
          "value": "Grafometrica"
        }
      ]
    } %}
</div>


<div class="l-main-wrapper  l-margin-top--big">
    {% render '@footer-controls', footerControls %}
</div>


        
            
            {
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Stampa contratto"
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

Handle: @mercedes-sprint1-28
Preview:
- With layout
- Component only
Filesystem Path: components/pages/28-1_28/Mercedes-Sprint1-28.nunj
References (10): @header--small, @step-line, @recap-header, @notification-banner, @input--text, @checkbox, @input--select, @input--icon, @question-row, @footer-controls

There are no notes for this item.

Mercedes Sprint 1 - 20

Mercedes Sprint 2 6