Banner
Utilizza elementi ad alto impatto visivo per messaggi o informazioni importanti.
Tutti gli esempi di codice sono specifici per la Versione 3.1 del tema
Banner semplice
ultimo aggiornamento 8/10/24
Il banner semplice è la forma più elementare del banner, costituito da un titolo, un testo, un bottone di call-to-action e, opzionalmente, un'immagine di sfondo.
Questo tipo di banner è caratterizzato dalla presenza delle classi .banner e .simple associate al contenitore principale.
<div class="row banner simple align-items-center position-relative">
<div class="banner-wrapper col-12 p-3 p-xl-5">
<h4 class="mb-2">Cerca gli insegnamenti</h4>
<p>I corsi di studio, i master, i dottorati, le scuole di specializzazione e le altre opportunità di UniTO per la tua formazione.<br>Ricerca tra gli insegnamenti dei corsi di laurea.</p>
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Cerca corsi
<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 class="mt-3 row banner simple align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_simple_bg.png" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column align-items-start align-items-lg-center">
<h4 class="mb-2">Cerca gli insegnamenti</h4>
<p class="text-start text-lg-center">I corsi di studio, i master, i dottorati, le scuole di specializzazione e le altre opportunità di UniTO per la tua formazione.<br>Ricerca tra gli insegnamenti dei corsi di laurea.</p>
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Cerca corsi
<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 class="mt-3 row banner simple align-items-center position-relative">
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-center">
<div class="col-12 col-lg-9">
<h4 class="mb-2">Cerca gli insegnamenti</h4>
<p class="mb-lg-0">I corsi di studio, i master, i dottorati, le scuole di specializzazione e le altre opportunità di UniTO per la tua formazione.<br>Ricerca tra gli insegnamenti dei corsi di laurea.</p>
</div>
<div class="col-12 col-lg-3 text-start text-lg-center">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Cerca corsi
<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>Banner cta multipli
ultimo aggiornamento 9/10/24
I banner con cta multipli sono una variante pensata per ospitare al suo interno più bottoni o links. La variante è caratterizzata dalla presenza della classe .cta associata al contenitore principale.
Le classi aggiuntive .pink .yellow .red o .darkdeterminano la tinta del gradiente in sovraimpressione sul banner.
<div class="row banner cta pink align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta red mt-3 align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta yellow mt-3 align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta dark mt-3 align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>Se utilizzata la classe, .reversed in associazione alle classi precedenti, i banner vengono visualizzati in direzione opposta.
<div class="row banner cta pink reversed align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6 order-lg-1">
<div class="pl-5 w-75 m-auto">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta red mt-3 reversed align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6 order-lg-1">
<div class="pl-5 w-75 m-auto">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta yellow mt-3 reversed align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6 order-lg-1">
<div class="pl-5 w-75 m-auto">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-secondary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>
<div class="row banner cta dark mt-3 reversed align-items-center position-relative">
<div class="w-100 h-100 position-absolute p-0"><img src="https://tema.unito.it/v3/assets/images/banner_cta_bg.jpg" alt="Lorem Ipsum"></div>
<div class="gradient-overlay p-0"></div>
<div class="banner-wrapper col-12 p-3 p-xl-5 d-flex flex-column flex-lg-row align-items-start align-items-lg-center">
<div class="col-12 col-lg-6 order-lg-1">
<div class="pl-5 w-75 m-auto">
<h4 class="mb-2 text-center text-lg-start">Sportelli</h4>
<p class="p-2 p-lg-0 text-center text-lg-start">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. Duis aute irure dolor in reprehenderit.
</p>
</div>
</div>
<div class="col-12 col-lg-6 p-3 d-flex justify-content-center flex-column">
<div class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="row w-75 m-auto">
<div class="col-12 col-lg-6 text-center p-2">
<a class="btn btn-primary" href="#" role="button">
<div class="d-flex w-100 h-100 align-items-center">Link a contenuto
<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 class="col text-center p-2"></div>
</div>
</div>
</div>
</div>Banner "In evidenza"
ultimo aggiornamento 7/10/24
Il banner "in evidenza" è costituito da una immagine, un titolo, una descrizion ed un botton di call-to-action.
Questo tipo di banner è caratterizzato dalla presenza delle classi .banner e .in-evidenza associate al contenitore principale.
<div class="row banner in-evidenza align-items-center position-relative">
<div class="banner-image-wrapper p-0" style=""><img src="https://tema.unito.it/v3/assets/images/banner_in_evidenza.jpg" alt="Lorem Ipsum"></div>
<div class="banner-text-wrapper pb-0 pt-3 pl-3 pr-3 pb-lg-5 pl-lg-5 pr-lg-5 pt-lg-5">
<h2 class="mb-2">Torino Città Universitaria</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. Duis aute irure dolor in reprehenderit.</p>
<a class="btn btn-outline-primary" href="#" role="button" data-focus-mouse="false">
<div class="d-flex w-100 h-100 align-items-center">Scopri 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 class="decoration d-block d-lg-none p-0"></div>
</div>Se aggiunta la classe .reversed alle classi .banner e .in-evidenza il banner viene visualizzato in direzione opposta.
<div class="row banner in-evidenza reversed align-items-center position-relative">
<div class="banner-image-wrapper p-0" style=""><img src="https://tema.unito.it/v3/assets/images/banner_in_evidenza.jpg" alt="Lorem Ipsum"></div>
<div class="banner-text-wrapper pb-0 pt-3 pl-3 pr-3 pb-lg-5 pl-lg-5 pr-lg-5 pt-lg-5">
<h2 class="mb-2">Torino Città Universitaria</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. Duis aute irure dolor in reprehenderit.</p>
<a class="btn btn-outline-primary" href="#" role="button" data-focus-mouse="false">
<div class="d-flex w-100 h-100 align-items-center">Scopri 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 class="decoration d-block d-lg-none p-0"></div>
</div>Banner "In evidenza" compatto
ultimo aggiornamento 7/10/24
L'altezza generale del banner è influenzata dalla dimensione dell'immagine contenuta nel banner: se utilizata un'immagine di proporzioni wide, si ottiene un banner più compatto in senso verticale, come in esempio:
<div class="row banner in-evidenza align-items-center position-relative">
<div class="banner-image-wrapper p-0" style=""><img src="https://tema.unito.it/v3/assets/images/banner_in_evidenza_wide.jpg" alt="Lorem Ipsum"></div>
<div class="banner-text-wrapper pb-0 pt-3 pl-3 pr-3 pb-lg-5 pl-lg-5 pr-lg-5 pt-lg-5">
<p class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-outline-primary" href="#" role="button" data-focus-mouse="false">
<div class="d-flex w-100 h-100 align-items-center">Scopri 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 class="decoration d-block d-lg-none p-0"></div>
</div>
<div class="row banner in-evidenza reversed mt-5 align-items-center position-relative">
<div class="banner-image-wrapper p-0" style=""><img src="https://tema.unito.it/v3/assets/images/banner_in_evidenza_wide.jpg" alt="Lorem Ipsum"></div>
<div class="banner-text-wrapper pb-0 pt-3 pl-3 pr-3 pb-lg-5 pl-lg-5 pr-lg-5 pt-lg-5">
<p class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-outline-primary" href="#" role="button" data-focus-mouse="false">
<div class="d-flex w-100 h-100 align-items-center">Scopri 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 class="decoration d-block d-lg-none p-0"></div>
</div>