Mercedes Pattern Library

Mercedes Sprint 2 - 7 

<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="m-proposal-header">
    <div class="m-proposal-header__data">
        <div class="align-center">
            <div class="a-indicator  danger  ">
                F.S.
            </div>
            <span>
				PD: 2
			</span>
        </div>
        <div>
            <strong>
				Proposta 1001004798 <a href="#" class="a-link">
	
	(5)
</a>
			</strong>
            <small>
				CLASSE A 80d Automatic Sport 
			</small>
        </div>
        <div>
            <strong>
				Diego Bertolini
			</strong>
            <small>
				Persona fisica 
			</small>
        </div>
        <div class="align-center">
            <div class="m-action-controls">

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

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

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

                        <div class="a-notification">
                            3
                        </div>

                    </div>

                </div>

            </div>

        </div>
        <div>
            <strong>
				Finanz. Balloon
			</strong>
            <small>
				Durata 36 mesi 
			</small>
        </div>
        <div>
            <strong>
				6.000 €
			</strong>
            <small>
				Maxi rata 
			</small>
        </div>
        <div>
            <strong>
				8.000 €
			</strong>
            <small>
				Anticipo
			</small>
        </div>
        <div>
            <strong>
				320,29 €
			</strong>
            <small>
				Rata media
			</small>
        </div>
        <div>
            <strong>
				25.578,09 €
			</strong>
            <small>
				Importo finanziato
			</small>
        </div>

        <div class="align-right">
            <a href="#" class="a-link">
	
		<svg class="icon icon--assegna">
  <use xlink:href="../../assets/icons.svg#assegna" />
</svg>

	
	Assegna
</a>
            <small>
				Assegnato a: Bonino
			</small>
        </div>
    </div>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="row">

        <div class="col-6 l-padding-right--small">

            <div class="row">
                <div class="col-12">
                    <div class="m-underline-nav ">

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

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

                    </div>
                </div>
            </div>
            <div class="row l-margin-top--small">
                <div class="col-10">
                    <div class="ty-primary">
                        Lista dei soggetti.
                    </div>
                </div>
                <div class="col-2 l-end">
                    <div class="a-button a-button--icon">
                        <svg class="icon icon--move_column">
  <use xlink:href="../../assets/icons.svg#move_column" />
</svg>

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

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Francesca Romana Ferracini

                            <div class="m-accordion-trigger__sublabel">Titolare effettivo, GarantE</div>

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

                            <div class="a-indicator  danger  ">
                                F.S.
                            </div>

                            <div class="a-indicator  active   a-indicator__outline ">
                                SCIP.
                            </div>

                            <div class="a-indicator  active   a-indicator__outline ">
                                I.F.
                            </div>

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

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

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Francesca Romana Ferracini

                            <div class="m-accordion-trigger__sublabel">Titolare effettivo, GarantE</div>

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

                            <div class="a-indicator  neutral  ">
                                F.S.
                            </div>

                            <div class="a-indicator  active   a-indicator__outline ">
                                SCIP.
                            </div>

                            <div class="a-indicator  neutral   a-indicator__outline ">
                                I.F.
                            </div>

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

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

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Francesca Romana Ferracini

                            <div class="m-accordion-trigger__sublabel">Titolare effettivo, GarantE</div>

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

                            <div class="a-indicator  danger  ">
                                F.S.
                            </div>

                            <div class="a-indicator  active   a-indicator__outline ">
                                SCIP.
                            </div>

                            <div class="a-indicator  danger   a-indicator__outline ">
                                I.F.
                            </div>

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

                        </div>
                    </div>
                </div>
            </div>
            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="a-button-round">
                        <svg class="icon icon--more">
  <use xlink:href="../../assets/icons.svg#more" />
</svg>

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

        <div class="col-6">

            <div class="row">
                <div class="col-12">
                    <div class="m-underline-nav ">

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

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

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

                    </div>
                </div>
            </div>
            <div class="row l-margin-top--small">
                <div class="col-10">
                    <div class="ty-primary">
                        Lista dei documenti.
                    </div>
                </div>
                <div class="col-2 l-end">
                    <div class="a-button a-button--icon">
                        <svg class="icon icon--move_column">
  <use xlink:href="../../assets/icons.svg#move_column" />
</svg>

                    </div>
                </div>

            </div>

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Francesca Romana Ferracini

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

                            <div class="m-accordion-trigger__sublabel">Titolare effettivo, Garante</div>

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

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

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Mario Rossi

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

            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="m-accordion-trigger">
                        <div class="m-accordion-trigger__label">
                            Carla Mastandrea

                        </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>
            <div class="row l-margin-top--small">
                <div class="col-12">
                    <div class="a-button-round">
                        <svg class="icon icon--more">
  <use xlink:href="../../assets/icons.svg#more" />
</svg>

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

        </div>

    </div>
</div>

<div class="l-main-wrapper l-spacing--v-margin-normal-auto m-accordion-row__controls">
    <div class="m-footer-controls">

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

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

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

            <div class="a-button  a-button--transparent">
                Rifiuta
            </div>

            <div class="a-button  a-button--transparent">
                Annulla
            </div>

            <div class="a-button  a-button--azure">
                Convalida documenti
            </div>

        </div>

    </div>

</div>
 
{% render '@header--small' %}
{% render '@proposal-header' %}
<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
  <div class="row">

    <div class="col-6 l-padding-right--small">

      <div class="row">
        <div class="col-12">
          {% render '@underline-nav', leftMenu %}
        </div>
      </div>
      <div class="row l-margin-top--small">
        <div class="col-10">
          <div class="ty-primary">
            Lista dei soggetti.
          </div>
        </div>
        <div class="col-2 l-end">
            {% render '@buttons--icon', {'id': 'move_column'} %}
        </div>
      </div>


      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { 
            "label": "Francesca Romana Ferracini",
             "sublabel": "Titolare effettivo, GarantE",
            "items" : [
                  {
                    "atom": "indicator",
                    "label": "F.S.",
                    "status": "danger"
                  },
                  {
                    "atom": "indicator",
                    "label": "SCIP.",
                    "status": "active",
                    "outline": 1
                  },
                  {
                    "atom": "indicator",
                    "label": "I.F.",
                    "status": "active",
                    "outline": 1
                  }
                ]    
            } 
          %}
        </div>
      </div>

      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { 
            "label": "Francesca Romana Ferracini",
             "sublabel": "Titolare effettivo, GarantE",
            "items" : [
                  {
                    "atom": "indicator",
                    "label": "F.S.",
                    "status": ""
                  },
                  {
                    "atom": "indicator",
                    "label": "SCIP.",
                    "status": "active",
                    "outline": 1
                  },
                  {
                    "atom": "indicator",
                    "label": "I.F.",
                    "status": "",
                    "outline": 1
                  }
                ]    
            } 
          %}
        </div>
      </div>

      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { 
            "label": "Francesca Romana Ferracini",
             "sublabel": "Titolare effettivo, GarantE",
            "items" : [
                  {
                    "atom": "indicator",
                    "label": "F.S.",
                    "status": "danger"
                  },
                  {
                    "atom": "indicator",
                    "label": "SCIP.",
                    "status": "active",
                    "outline": 1
                  },
                  {
                    "atom": "indicator",
                    "label": "I.F.",
                    "status": "danger",
                    "outline": 1
                  }
                ]    
            } 
          %}
        </div>
      </div>
      <div class="row l-margin-top--small">
          <div class="col-12">
              {% render '@button-round', {"icon": "more"} %} 
          </div>
      </div>
    </div>

    <div class="col-6">

      <div class="row">
        <div class="col-12">
          {% render '@underline-nav', rightMenu %}
        </div>
      </div>
      <div class="row l-margin-top--small">
        <div class="col-10">
          <div class="ty-primary">
            Lista dei documenti.
          </div>
        </div>
        <div class="col-2 l-end">
            {% render '@buttons--icon', {'id': 'move_column'} %}
        </div>

      </div>

      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { "label": "Francesca Romana Ferracini", "sublabel_icons": "Titolare effettivo, Garante" } %}
        </div>
      </div>

      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { "label": "Mario Rossi" } %}
        </div>
      </div>

      <div class="row l-margin-top--small">
        <div class="col-12">
          {% render '@accordion-trigger', { "label": "Carla Mastandrea" } %}
        </div>
      </div>
      <div class="row l-margin-top--small">
          <div class="col-12">
              {% render '@button-round', {"icon": "more"} %} 
          </div>
      </div>

    </div>

  </div>
</div>

<div class="l-main-wrapper l-spacing--v-margin-normal-auto m-accordion-row__controls">
  {% render '@footer-controls',  {
      "right": [
          {
              "atom": "buttons",
              "value": "Ripristina"
          },
          {
              "atom": "buttons",
              "value": "Esci"
          },
          {
              "atom": "buttons--transparent",
              "value": "Rifiuta"
          },
          {
              "atom": "buttons--transparent",
              "value": "Annulla"
          },
          {
              "atom": "buttons--azure",
              "value": "Convalida documenti"
          }
      ]
  } %}
</div>
 
{
  "leftMenu": {
    "links": [
      {
        "label": "Proposta"
      },
      {
        "state": "active",
        "label": "Soggetti"
      }
    ]
  },
  "rightMenu": {
    "links": [
      {
        "label": "Banche Dati"
      },
      {
        "state": "active",
        "label": "Documenti"
      },
      {
        "label": "Note"
      }
    ]
  },
  "tableList": {
    "header": [
      {
        "label": "SERVIZIO",
        "type": "label"
      },
      {
        "label": "BANCA DATI",
        "type": "label"
      },
      {
        "label": "DATA",
        "type": "label"
      },
      {
        "label": null,
        "type": "label"
      }
    ],
    "data": [
      [
        {
          "label": "Eurisc",
          "type": "label"
        },
        {
          "label": "CRIF",
          "type": "label"
        },
        {
          "label": "22/09/2017 10:52:43",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions-mono",
          "reverse": 1,
          "actions": [
            {
              "icon": "arrow-down"
            }
          ]
        }
      ],
      [
        {
          "label": "Fraud Analyzer Compliance",
          "type": "label"
        },
        {
          "label": "CRIF",
          "type": "label"
        },
        {
          "label": "22/09/2017 17:23:09",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions-mono",
          "actions": []
        }
      ],
      [
        {
          "label": "Protesti/pregiudizievoli",
          "type": "label",
          "alert": "Moroso"
        },
        {
          "label": "EXPERIAN",
          "type": "label"
        },
        {
          "label": "22/09/2017 17:23:09",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions-mono",
          "actions": []
        }
      ],
      [
        {
          "label": "Eurisc",
          "type": "label"
        },
        {
          "label": "CRIF",
          "type": "label"
        },
        {
          "label": "22/09/2017 17:23:09",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions-mono",
          "actions": []
        }
      ]
    ]
  }
}

There are no notes for this item.