Mercedes Pattern Library

Mercedes Sprint 1 - 13 

<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="ty-primary">
        Acquisisci tramite OCR.
    </div>
</div>

<div class="l-main-wrapper l-margin-top--small">
    <p class="ty-medium">
        Questa funzionalità permette di acquisire le immagini e i contenuti dei documenti senza doverli inserire manualmente.<br> Seleziona il documento da acquisire.
    </p>
</div>

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

    <div class="row l-margin-top--small">

        <div class="col-4">
            <div class="a-button  a-button--file">
                <div class="a-button--name">

                    <svg class="icon icon--CI-TS">
  <use xlink:href="../../assets/icons.svg#CI-TS" />
</svg> Carta d'identità
                </div>
                <svg class="icon icon--arrow-down">
  <use xlink:href="../../assets/icons.svg#arrow-down" />
</svg>

            </div>
        </div>

        <div class="col-4">
            <div class="a-button  a-button--file">
                <div class="a-button--name">

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

            </div>
        </div>

        <div class="col-4">
            <div class="a-button  a-button--file">
                <div class="a-button--name">

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

            </div>
        </div>

    </div>

    <div class="row l-margin-top--small">

        <div class="col-4">
            <div class="a-button  a-button--file">
                <div class="a-button--name">

                    <svg class="icon icon--CI-TS">
  <use xlink:href="../../assets/icons.svg#CI-TS" />
</svg> Tessera sanitaria
                </div>
                <svg class="icon icon--arrow-down">
  <use xlink:href="../../assets/icons.svg#arrow-down" />
</svg>

            </div>
        </div>

        <div class="col-4">
            <div class="a-button  a-button--file">
                <div class="a-button--name">

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

            </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">
                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">
    <div class="ty-primary">
        Acquisisci tramite OCR.
    </div>
</div>

<div class="l-main-wrapper l-margin-top--small">
    <p class="ty-medium">
        Questa funzionalità permette di acquisire le immagini e i contenuti dei documenti senza doverli inserire manualmente.<br>
        Seleziona il documento da acquisire.
    </p>
</div>


<div class="l-main-wrapper l-margin-top--normal">
   {% for row in buttons %}
        <div class="row l-margin-top--small">  
            {% for button in row %}      
                <div class="col-4">
                    {% render '@'+ button.button,  button %}
                </div>                
            {% endfor %}
        </div>
    {% endfor %}
</div>


<div class="l-main-wrapper  l-margin-top--big">
    {% render '@footer-controls', footerControls %}
</div>
 
{
  "buttons": [
    [
      {
        "button": "buttons--file",
        "iconName": "CI-TS",
        "value": "Carta d'identità"
      },
      {
        "button": "buttons--file",
        "iconName": "passaporto",
        "value": "Passaporto"
      },
      {
        "button": "buttons--file",
        "iconName": "CI-TS",
        "value": "Patente"
      }
    ],
    [
      {
        "button": "buttons--file",
        "iconName": "CI-TS",
        "value": "Tessera sanitaria"
      },
      {
        "button": "buttons--file",
        "iconName": "busta-paga",
        "value": "Busta paga"
      }
    ]
  ],
  "footerControls": {
    "left": [
      {
        "atom": "buttons--transparent",
        "value": "Esci"
      }
    ],
    "right": [
      {
        "atom": "buttons",
        "iconName": "passaporto",
        "value": "Indietro"
      },
      {
        "atom": "buttons--azure",
        "value": "Avanti"
      }
    ]
  }
}

There are no notes for this item.