{CLICCA QUI PER SCOPRIRE COME INTEGRARE L'HEADER}

## Titoli

    <!-- Pagine con solo titolo -->
    <h2>H2 Titolo della pagina</h2>

    <!-- Pagine con span e titolo -->
    <span class="span-title">Span prima del titolo</span>
    <h2>H2 Titolo della pagina</h2>

    <!-- Pagine con titolo e sezione -->
    <h2>H2 Titolo della pagina</h2>
    <h3>H3 In Evidenza</h3>

    <!-- Pagine con titolo e descrizione -->
    <h2>H2 Titolo della pagina</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Pagine con solo titolo:

## H2 Titolo della pagina

Pagine con span e titolo:

Span prima del titolo

## H2 Titolo della pagina

Pagine con titolo e sezione:

## H2 Titolo della pagina

### H3 In Evidenza

Pagine con titolo e descrizione:

## H2 Titolo della pagina

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

User Experience

Il titolo deve coincidere con il titolo della pagina. Offre all'utente una chiara idea circa il contenuto della pagina.
Il titolo può essere seguito da un sottotitolo (sezione) oppure da una descrizione.

## Wizard

    <!-- Pagine con titolo e step -->
    <h2>H2 Titolo della pagina</h2>
    <div class="row carousel-step">
       <div class="col-xs-12 noPadding">
          <div class="stepByStep" id="stepByStep1" data-interval="false">
             <div class="stepControl col-xs-1">
                <button class="left custom-carousel-control btn active-none">
                <span class="fa fa-caret-left pull-left" aria-hidden="true"></span>
                </button>
             </div>
             <div class="carousel-wrapper col-xs-12 noPadding">
                <div class="carousel-custom">
                   <div class="item prevActive">
                      <a href="#" title="Precedente">
                      <span>
                      <span class="step-number">1</span>
                      Primo step >
                      </span>
                      </a>
                   </div>
                   <div class="item active">
                      <a href="#" title="Attivo">
                      <span>
                      <span class="step-number">2</span>
                      Secondo step >
                      </span>
                      </a>
                   </div>
                   <div class="item">
                      <a href="#" title="Non attivo">
                      <span>
                      <span class="step-number">3</span>
                      Terzo step >
                      </span>
                      </a>
                   </div>
                   <div class="item">
                      <a href="#" title="Non attivo">
                      <span>
                      <span class="step-number">4</span>
                      Quarto step >
                      </span>
                      </a>
                   </div>
                   <div class="item last">
                      <a href="#" title="Non attivo">
                      <span>
                      <span class="step-number">5</span>
                      Quinto step
                      </span>
                      </a>
                   </div>
                </div>
             </div>
             <div class="stepControl col-xs-1">
                <button class="right custom-carousel-control btn active-none">
                <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                </button>
             </div>
          </div>
       </div>
    </div>

    <!-- Pagine con titolo e step con errori -->
    <h2>H2 Titolo della pagina</h2>
    <div class="row carousel-step">
       <div class="col-xs-12 noPadding">
          <div class="stepByStep" id="stepByStep2" data-interval="false">
             <div class="stepControl col-xs-1">
                <button class="left custom-carousel-control btn active-none">
                <span class="fa fa-caret-left pull-left" aria-hidden="true"></span>
                </button>
             </div>
             <div class="carousel-wrapper col-xs-12 noPadding">
                <div class="carousel-custom">
                   <div class="item prevActive">
                      <a href="#" class="errorLabel" title="Precedente con errore">
                      <span>
                      <span class="step-number">1</span>
                      Primo step >
                      </span>
                      </a>
                   </div>
                   <div class="item active">
                      <a href="#" class="errorLabel" title="Attivo con errore">
                      <span>
                      <span class="step-number">2</span>
                      Secondo step >
                      </span>
                      </a>
                   </div>
                   <div class="item">
                      <a href="#" class="errorLabel" title="Non attivo con errore">
                      <span>
                      <span class="step-number">3</span>
                      Terzo step >
                      </span>
                      </a>
                   </div>
                   <div class="item">
                      <a href="#" title="Non attivo">
                      <span>
                      <span class="step-number">4</span>
                      Quarto step >
                      </span>
                      </a>
                   </div>
                   <div class="item last">
                      <a href="#" title="Non attivo">
                      <span>
                      <span class="step-number">5</span>
                      Quinto step
                      </span>
                      </a>
                   </div>
                </div>
             </div>
             <div class="stepControl col-xs-1">
                <button class="right custom-carousel-control btn active-none">
                <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                </button>
             </div>
          </div>
       </div>
    </div>

Pagine con titolo e step:

## H2 Titolo della pagina

1 Primo step >
2 Secondo step >
3 Terzo step >
4 Quarto step >
5 Quinto step

Pagine con titolo e step con errori:

## H2 Titolo della pagina

1 Primo step >
2 Secondo step >
3 Terzo step >
4 Quarto step >
5 Quinto step
User Experience

Il wizard indica una procedura che permette all'utente di eseguire determinate operazioni (solitamente complesse) tramite una serie di passi successivi. Le caratteristiche principali del wizard sono la semplicità d'uso.
- Il numero degli step deve essere sempre visibile.
- Si consiglia, in caso di procedure complesse, di far procedere all'interno del wizard attraverso il bottone “Continua” o “Continua e Salva” per evitare di far saltare l'utente tra i vari step senza un ordine logico.
- La presenza di un errore deve sempre essere evidenziata al completamento di ogni step.

{CLICCA QUI PER SCOPRIRE COME INTEGRARE IL FOOTER}

INAIL sede centrale: P.le Pastore 6, 00144 Roma (RM) - P. IVA 00968951004

## Menu di servizio

- Responsabile della pubblicazione
- Avviso all'utenza
- Accessibilità
- Monitoraggio accessi
- Mappa del sito

Torna alla navigazione interna

## Menu in lingua

- Inglese
- Spagnolo
- Tedesco
- Francese

- Home (accesskey:h)
- Vai a Istituto (accesskey:i)
- Vai a Attività (accesskey:a)
- Vai a Atti e Documenti (accesskey:d)
- Vai a Comunicazione (accesskey:c)
- Vai a Servizi per Te (accesskey:t)
- Vai a Supporto (accesskey:s)

Torna alla navigazione interna