Unito.it

Tema Unito v 3 / 3.1

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

Per ottenere il componente Hero nella sua versione più piccola aggiungere alla section .it-hero-wrapper la classe .it-hero-small-size.

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
Categoria

Lorem ipsum dolor sadipscing.

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>
<div class="it-hero-wrapper it-hero-small-size mt-4">
  <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 sadipscing.</h1>
              <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.

descrizione immagine
Categoria

Heading 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.

Label CTA
<div class="it-hero-wrapper it-dark it-overlay it-bottom-overlapping-content"> <!-- - img-->
  <div class="img-responsive-wrapper">
    <div class="img-responsive">
        <img src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" title="titolo immagine" alt="descrizione immagine">
    </div>
  </div>
  <!-- - texts-->
  <div class="container">
    <div class="row">
        <div class="col-12">
          <div class="it-hero-text-wrapper bg-dark">
              <span class="it-Categoria">Categoria</span>
              <h2>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
              <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="#">Label CTA</a></div>
          </div>
        </div>
    </div>
  </div>
</div>

Con immagine e margine negativo per contenuti sovrapposti - solo Versione 3.1

ultimo aggiornamento 17/10/24

In alcuni casi, il contenuto che segue può sovrapporsi al componente hero. Aggiungere alla section .it-hero-wrapper la classe .it-bottom-overlapping-content per far sì che il contenuto seguente si sovrapponga al componente hero (in questo caso il componente seguente è una card).

descrizione immagine
Categoria

Heading 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.

Label CTA
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leggi di più 
<section class="it-hero-wrapper it-dark it-overlay it-bottom-overlapping-content">
   <div class="img-responsive-wrapper">
      <div class="img-responsive">
         <img src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" title="titolo immagine" alt="descrizione immagine">
      </div>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-12">
            <div class="it-hero-text-wrapper bg-dark">
               <span class="it-Categoria">Categoria</span>
               <h2>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
               <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" title="Lorem Ipsum" href="#">Label CTA</a></div>
            </div>
         </div>
      </div>
   </div>
</section>
<div class="container">
   <div class="row">
      <div class="col-12">
         <div class="card-wrapper card-space">
            <div class="card card-bg">
               <div class="card-body">
                  <div class="row">
                    <div class="col-12 col-lg-10 offset-lg-1">
                      <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
                      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                      <a class="read-more" href="#">
                        <span class="text">Leggi di più</span>
                        <span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span>
                        <svg class="icon">
                            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                        </svg>
                      </a>
                    </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Se utilizzata la classe .overlapping-content-v2 in associazione alle classi precedenti, si ottiene una variante del componente Hero con contenuti sovrapposti.

descrizione immagine
5x1000 a UNITO

Scegli l'Università di Torino, investi su ricerca e futuro!

Leggi di più Titolo 
<section class="it-hero-wrapper it-bottom-overlapping-content overlapping-content-v2">
    <div class="img-responsive-wrapper">
        <div class="img-responsive">
            <div class="img-wrapper">
                <img src="https://tema.unito.it/v3/assets/images/Hero_image.jpg" title="titolo immagine" alt="descrizione immagine">
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-10 col-md-8 col-lg-6 p-0 mb-2">
                <div class="card-wrapper card-space">
                    <div class="card card-bg">
                        <div class="card-body">
                            <div class="row justify-content-center">
                                <div class="col-12 text-center">
                                    <h5 class="mb-2">5x1000 a UNITO</h5>
                                    <p class="card-text"> Scegli l'Università di Torino, investi su ricerca e futuro!</p>
                                    <a class="btn btn-primary" href="#" role="button" data-focus-mouse="false" title="Lorem Ipsum">
                                        <div class="d-flex w-100 h-100 align-items-center">Leggi di più
                                            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                                                <title id="button_tit1">Titolo</title>
                                                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Torna su