Unito.it

Tema Unito v2

Hero

Hero (anche denominato “Jumbotron”) è un componente per la presentazione di contenuti in evidenza.

Il cosiddetto Hero è un componente leggero e flessibile che può facoltativamente estendere l’intera finestra per mostrare i messaggi in evidenza sul tuo sito. Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.

Il componente Hero può contenere

  • Sub head
  • Heading (titolo)
  • Paragrafo
  • Call to action
  • Immagine di background

Il componente Heroè un componente full screen (orizzontalmente). Per le reale visualizzazione a schermo potete guardare la pagina di esempio: Esempi Hero .

Con contenuti testuali

Esempio di Hero con tutti i componenti testuali

Categoria

Lorem ipsum dolor sit amet, consetetur sadipscing.

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Link
<div class="it-hero-wrapper">
  <div class="container">
    <div class="row">
        <div class="col-12">
          <div class="it-hero-text-wrapper bg-dark">
              <span class="it-category">Categoria</span>
              <h1 class="no_toc">Lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
              <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
              <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Link</a></div>
          </div>
        </div>
    </div>
  </div>
</div>

Con testi ed immagine di sfondo

Per visualizzare i testi in overlay sulle immagini, viene creato un div scuro in opacità per migliorare la leggibilità del testo in caso di immagini dai toni chiari. aggiungere al div .it-hero-wrapper la classi:
.it-overlay : crea il div che si sovrappone all’immagine
.it-dark : definisce il colore di background del div in overlay.

imagealt
Categoria

Lorem ipsum dolor sit amet, consetetur sadipscing.

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

Link
<div class="it-hero-wrapper it-dark it-overlay">
  <!-- - img-->
  <div class="img-responsive-wrapper">
    <div class="img-responsive">
        <div class="img-wrapper"><img src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" title="img title" alt="imagealt"></div>
    </div>
  </div>
  <!-- - texts-->
  <div class="container">
    <div class="row">
        <div class="col-12">
          <div class="it-hero-text-wrapper bg-dark">
              <span class="it-category">Categoria</span>
              <h1 class="no_toc">Lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
              <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
              <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Link</a></div>
          </div>
        </div>
    </div>
  </div>
</div>

Con indicatori e frecce di avanzamento

I due link con classe carousel-control-next e carousel-control-prev vanno a costruire le frecce laterali per navigare attraverso le slide; l'attributo .href contiene il riferimento alla id dell'oggetto principale. Gli indicatori sono invece costruito attraverso un elenco puntato con classe carousel-indicators; in questo caso il riferimento all'oggetto principale è indicato dall'attributo data-target e la slide cui si riferisce il singolo indicatore dall'attributo data-slide-to. 

<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators2" data-slide-to="1" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Titolo Caption</h5>
                        <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-09/animals_hero_antelope.jpg" alt="Second slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Titolo Caption 2</h5>
                        <p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next" data-focus-mouse="false">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
</div>
Torna su