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 titoloH2 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.
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
Pagine con titolo e step con errori:
H2 Titolo della pagina
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.