<form class="Form Form--spaced u-padding-all-xl">

    <div class="Alert Alert--error Alert--withIcon u-margin-r-bottom" role="alert">
        <p class="u-text-p">
            È necessario correggere alcuni errori prima di poter inviare il form
        </p>
    </div>

    <div class="Form-field is-invalid">
        <div class="Alert Alert--error Alert--withBg u-padding-r-top u-padding-r-bottom u-padding-r-right">
            <p id="error-cognome" class="u-text-p u-padding-r-bottom">Formato del campo non corretto</p>
            <label class="Form-label" for="cognome">Cognome</label>
            <input class="Form-input" id="cognome" aria-invalid="true" aria-describedby="error-cognome">
        </div>
    </div>

    <div class="Form-field is-warning">
        <div class="Alert Alert--warning Alert--withBg u-padding-r-top u-padding-r-bottom u-padding-r-right">
            <p id="error-citta" class="u-text-p u-padding-r-bottom">Formato del campo non corretto</p>
            <label class="Form-label" for="citta">Città</label>
            <input class="Form-input" id="citta" aria-invalid="true" aria-describedby="error-citta">
        </div>
    </div>

    </div>
</form>