Mercedes Pattern Library

Modal Window: Default 

<div class="m-modal-window">
    <div class="m-modal-window__background"></div>
    <div class="m-modal-window__body">
        <div class="ty-primary">Accettazione della proposta.</div>
        <div class="ty-body l-margin-top--small">Inserisci le tue credenziali per confermare l’operazione.</div>

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

            <div class="a-input  a-input--text  ">
                <div class="a-input__label">

                    Nome utente

                </div>
                <input type="text" value="Alvinol">
            </div>

            <div class="l-margin-top--small">
                <div class="a-input  a-input--text  ">
                    <div class="a-input__label">

                        Password

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

                    </div>
                    <input type="password" value="Non definito">
                </div>

            </div>
        </div>

        <div class="m-modal-window__footer l-margin-top--big">
            <div class="row">
                <div class="col-6">
                    <div class="a-button">
                        Annulla
                    </div>
                </div>
                <div class="col-6">
                    <div class="a-button  a-button--azure">
                        Conferma
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
 
<div class="m-modal-window">
    <div class="m-modal-window__background"></div>
    <div class="m-modal-window__body">
        <div class="ty-primary">Accettazione della proposta.</div>
        <div class="ty-body l-margin-top--small">Inserisci le tue credenziali per confermare l’operazione.</div>

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

                {% render '@input--text', {
                    "text": {
                        "label": "Nome utente",
                        "value": "Alvinol"
                    }
                } %} 
            <div class="l-margin-top--small">
                {% render '@input--password', {
                    "text": {
                        "label": "Password",
                        "value": "Non definito"
                    }
                } %}
            </div>
        </div>

        <div class="m-modal-window__footer l-margin-top--big">
            <div class="row">
                <div class="col-6">
                    {% render '@buttons', {'value': 'Annulla'} %}  
                </div>
                <div class="col-6">
                    {% render '@buttons--azure', {'value': 'Conferma'} %}    
                </div>
            </div>
        </div>

    </div>    

</div>
 
/* No context defined for this component. */

There are no notes for this item.