Hero

La Hero, primo elemento che l'utente vede in pagina, è il componente per la presentazione dei contenuti in evidenza.
Si tratta di un componente full screen orizzontale che può caratterizzarsi in diverse varianti a seconda dei contenuti presenti all'interno.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per l'hero nell'Ecosistema digitale Turismo Cultura.

Titolo in h1

Mollitia tempora bibendum libero

                                            
<div class="dms-hero jumbotron jumbotron-fluid d-flex align-items-center"
    style="background-image: url(assets/img/placeholder-img.jpg);">
    <div class="container">
        <div class="dms-hero--content">
            <h1>Titolo in h1</h1>
            <p class="dms-hero--subtitle">Mollitia tempora bibendum
                <strong>libero</strong>
            </p>
            <button class="btn dms-btn dms-btn--secondary"
                type="button">Approfondisci
            </button>
        </div>
    </div>
</div>

Utilizzo

La Hero è un componente full-width flessibile che può facoltativamente contenere un heading (titolo), un paragrafo, una cta e un'immagine di background.

E' obbligatorio:

utilizzare un solo hero per pagina, al fine di privilegiare i contenuti in evidenza
applicare classe dms-hero dms-hero jumbotron jumbotron-fluid per visualizzare correttamente in componente
inserire il componente all'interno di un container-fluid p-0
utilizzare un background-image con stile in linea, ad esempio style="background-image: url(assets/img/placeholder-img.jpg);"

Nel caso si vogliano inserire molteplici hero in modalità slideshow, consultare la pagina Carousel.