Mercedes Sprint 1 - 7

Ready

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  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="ty-primary">
        Inserisci i dati commerciali.
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="m-underline-nav ">

        <a href="#" class="m-underline-nav__child  m-underline-nav__child--active">
			Nuovo
		</a>

        <a href="#" class="m-underline-nav__child  ">
			Usato
		</a>

    </div>
</div>

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

    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-6">
                    <div class="a-input  a-input--text  a-input--disabled">
                        <div class="a-input__label">
                            Label
                        </div>
                        <input type="text" value="25.991,80 €" disabled>
                    </div>
                </div>
                <div class="col-6">
                    <div class="a-input  a-input--text  a-input--disabled">
                        <div class="a-input__label">
                            Label
                        </div>
                        <input type="text" value="25.991,80 €" disabled>
                    </div>
                </div>
            </div>
            <div class="row  l-margin-top--normal">
                <div class="col">
                    <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>
        <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>

                </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 class="row  l-margin-top--normal">
                <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 class="col-4">
            <div class="row">
                <div class="col-12">
                    <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>
            <div class="row  l-margin-top--normal">
                <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 class="l-main-wrapper  l-margin-top--normal">
    <div class="m-accordion-trigger m-accordion-trigger--active">
        <div class="m-accordion-trigger__label">
            Label

            <div class="a-tag">
                <span>
		2
	</span>
            </div>

        </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 class="l-white-container">

        <div class="l-main-wrapper">
            <table class="m-table-list">

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

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

                            CODICE

                        </td>

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

                            DESCRIZIONE

                        </td>

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

                            Prezzo (IVA Esclusa)

                        </td>

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

                            Prezzo (IVA Inclusa)

                        </td>

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

                            sconto

                        </td>

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

                        </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="AC3F">
                                AC3F
                            </div>

                        </td>

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

                            <div class="h-ellipsis" title="Rapporto al ponte i=4,375">
                                Rapporto al ponte i=4,375
                            </div>

                        </td>

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

                            <div class="h-ellipsis" title="1.000 €">
                                1.000 €
                            </div>

                        </td>

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

                            <div class="h-ellipsis" title="1.500 €">
                                1.500 €
                            </div>

                        </td>

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

                            <label class="a-checkbox " for="field-id-8948">
    <input type="checkbox"   id="field-id-8948">
    <span></span>
    
</label>

                        </td>

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

                            <a href="#" title="Cestina">
                                <svg class="icon icon--delete">
  <use xlink:href="../../assets/icons.svg#delete" />
</svg>

                            </a>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <div class="l-main-wrapper  l-margin-top--normal">
            <div class="m-underline-nav ">

                <a href="#" class="m-underline-nav__child  ">
			Cerca un accessorio
		</a>

                <a href="#" class="m-underline-nav__child  m-underline-nav__child--active">
			Inserisci manualmente
		</a>

            </div>
        </div>

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

            <div class="row l-start l-bottom">
                <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="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-8979">
    <input type="checkbox"   id="field-id-8979">
    <span></span>
    
    	<div class="ty-body">
    		label
    	</div>
    
</label>

                </div>
            </div>

        </div>

        <div class="l-main-wrapper  l-margin-top--normal">
            <div class="l-end">
                <div class="a-button  a-button--azure">
                    Button
                </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--normal">
    <div class="m-footer-controls">

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

            <div class="a-button  a-button--transparent">
                Esci
            </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">
    <div class="ty-primary">
        Inserisci i dati commerciali.
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@underline-nav', {
        "links": [
            {
                "state": "active",
                "label": "Nuovo"
            },
            {
                "label": "Usato"
            }
        ]
    } %}
</div>

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

    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-6">
                    {% render '@input--disabled' %}
                </div>
                <div class="col-6">
                    {% render '@input--disabled' %}
                </div>
            </div>
            <div class="row  l-margin-top--normal">
                <div class="col">
                    {% render '@input--select' %}
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6">
                    {% render '@input--text' %}
                </div>
                <div class="col-6">
                    {% render '@input--text' %}
                </div>
            </div>
            <div class="row  l-margin-top--normal">
                <div class="col-6">
                    {% render '@input--text' %}
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-12">
                    {% render '@digit-box--big' %}
                </div>
            </div>
            <div class="row  l-margin-top--normal">
                <div class="col-6">
                    {% render '@digit-box' %}
                </div>
                <div class="col-6">
                    {% render '@digit-box' %}
                </div>
            </div>
        </div>
    </div>

</div>


<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@accordion-trigger--active' %}
    <div class="l-white-container">

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

        <div class="l-main-wrapper  l-margin-top--normal">
            {% render '@underline-nav', {
                "links": [
                    {
                        "label": "Cerca un accessorio"
                    },
                    {
                        "state": "active",
                        "label": "Inserisci manualmente"
                    }
                ]
            } %}
        </div>

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

            <div class="row l-start l-bottom">
                <div class="col-4">
                    {% render '@input--select' %}
                </div>
                <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--normal">
            <div class="l-end">
                {% render '@buttons--azure' %}
            </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--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"
        }
      ]
    ]
  },
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Esci"
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

Handle: @mercedes-sprint1-7
Preview:
- With layout
- Component only
Filesystem Path: components/pages/07-1_7/Mercedes-Sprint1-7.nunj
References (15): @header--small, @step-line, @info-auto, @underline-nav, @input--disabled, @input--select, @input--text, @digit-box--big, @digit-box, @accordion-trigger--active, @table-list, @checkbox, @buttons--azure, @accordion-trigger, @footer-controls

There are no notes for this item.

Mercedes Sprint 1 - 7

Mercedes Sprint 2 6