Mercedes Pattern Library

Mercedes Sprint 1 Profilazione Clienti 

<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">
        Profilazione Clienti
    </div>
</div>

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

                    SOGGETTO RICHIEDENTE

                </td>

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

                    CLIENTE

                </td>

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

                    TITOLARE EFFETTIVO

                </td>

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

                    GARANTE

                </td>

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

                    RAPPR. LEGALE

                </td>

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

                    SOTTOSCRITTORE RID

                </td>

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

                    PEP

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

                </td>

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

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

                </td>

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

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

                </td>

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

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

                </td>

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

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

                </td>

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

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

                </td>

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

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

                </td>

            </tr>

        </tbody>

    </table>

</div>

<div class="l-main-wrapper">
    <div class="l-end">
        <a href="#" class="a-link">
	
		<svg class="icon icon--plus-circle">
  <use xlink:href="../../assets/icons.svg#plus-circle" />
</svg>

	
	Aggiungi
</a>
    </div>
</div>

<div class="l-main-wrapper  l-margin-top--small">
    <div class="m-question-row">
        <div class="row l-middle">
            <div class="col-9">
                <div class="m-question-row__question  ty-body">
                    Nella proposta sono coinvolte <a href='#'>Persone Esposte Politicamente (PEP)</a>?
                </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>

<div class="l-main-wrapper  l-margin-top--small">
    <div class="m-question-row">
        <div class="row l-middle">
            <div class="col-9">
                <div class="m-question-row__question  ty-body">
                    Si tratta di una proposta K2K?
                </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>

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

<div class="l-main-wrapper  l-margin-top--normal">
    <div class="ty-primary">
        Profilazione Clienti
    </div>
</div>


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

<div class="l-main-wrapper">
    <div class="l-end">
        {% render '@link', {
            "label": "Aggiungi",
            "icon": "plus-circle"
        } %}
    </div>
</div>


<div class="l-main-wrapper  l-margin-top--small">
    {% render '@question-row', {
        "question": "Nella proposta sono coinvolte <a href='#'>Persone Esposte Politicamente (PEP)</a>?",
        "answers": [
            {
              "value": "Sì"
            },
            {
              "value": "No"
            }
        ]
    } %}
</div>

<div class="l-main-wrapper  l-margin-top--small">
    {% render '@question-row', {
        "question": "Si tratta di una proposta K2K?",
        "answers": [
            {
              "value": "Sì"
            },
            {
              "value": "No"
            }
        ]
    } %}
</div>

<div class="l-main-wrapper  l-margin-top--normal">
    {% render '@footer-controls', footerControls %}
</div>
 
{
  "tableList": {
    "header": [
      {
        "label": "SOGGETTO RICHIEDENTE",
        "type": "label"
      },
      {
        "label": "CLIENTE",
        "type": "checkbox"
      },
      {
        "label": "TITOLARE EFFETTIVO",
        "type": "checkbox"
      },
      {
        "label": "GARANTE",
        "type": "checkbox"
      },
      {
        "label": "RAPPR. LEGALE",
        "type": "checkbox"
      },
      {
        "label": "SOTTOSCRITTORE RID",
        "type": "checkbox"
      },
      {
        "label": "PEP",
        "type": "checkbox"
      }
    ],
    "data": [
      [
        {
          "label": "Diego Bartolini",
          "type": "label"
        },
        {
          "type": "checkbox"
        },
        {
          "type": "checkbox"
        },
        {
          "type": "checkbox"
        },
        {
          "type": "checkbox"
        },
        {
          "type": "checkbox"
        },
        {
          "type": "checkbox"
        }
      ]
    ]
  },
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Esci"
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

There are no notes for this item.