Card
Un contenitore di testi e immagini con molte opzioni e varianti.
Card Base
ultimo aggiornamento 4/10/24
Le Card sono contenitori flessibili ed estendibili. Costruite con flexbox, offrono un facile posizionamento nella griglia e si combinano bene con altri componenti. Di default le card si estendono completamente al 100% del loro elemento contenitore.
La card base e le sue varianti sono caratterizzate dalla classe .base-card associata alla classe principale .card.
Solo Versione 3
Category
Name
Name
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.
<div class="row">
<div class="col-12 col-lg-4">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="categoryicon-top">
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-file"></use>
</svg>
<span class="text">Category<br>Name</span>
</div>
<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.</p>
</div>
</div>
</div>
</div>
</div>Versione 3.1
Title card
Subtitle card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
Title card
Subtitle card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
1
Title card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
<div class="row">
<div class="col-12 col-md-4 col-lg-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body flex-column ">
<h5 class="card-title col-12 mb-2">Title card</h5>
<h6 class="card-subtitle col-12 mb-2">Subtitle card</h6>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body flex-column ">
<h5 class="card-title col-12 mb-2">Title card</h5>
<h6 class="card-subtitle col-12 mb-2">Subtitle card</h6>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
<div class="col-12 d-flex mt-2 mb-2 justify-content-end">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<span class="text">Link a contenuto</span>
<svg class="icon">
<title id="icon-title4w">Lorem Ipsum</title>
<use aria-describedby="icon-title4w" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="card-body flex-column ">
<h5 class="card-title col-12 mb-2">Title card</h5>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10"></div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="card-body flex-column pt-0 pb-0 pl-3 pr-3">
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10">
<h5 class="card-title mb-0"><a href="#" title="lorem ipsum">Title card</a></h5>
</div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3 mt-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="card-body flex-column ">
<h5 class="card-title card-title-huge mb-4 col-12"><a href="#" title="lorem ipsum">1</a></h5>
<h6 class="card-subtitle col-12 mb-2">Title card</h6>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3 mt-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="card-body flex-column ">
<div class="categoryicon-top col-12 ">
<svg class="icon" aria-describedby="icon-title_05">
<title id="icon-title_05">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-ateneo"></use>
</svg>
<h5 class="card-title ml-2 mb-0">Title card</h5>
</div>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10"></div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-12 col-md-4 col-lg-3 mt-3">
<!--start card-->
<div class="card-wrapper base-card">
<div class="card card-img no-after">
<div class="card-body flex-column ">
<div class="categoryicon-top col-12 ">
<svg class="icon" aria-describedby="icon-title_06">
<title id="icon-title_06">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-ateneo"></use>
</svg>
<span class="text ml-2">Category Name</span>
</div>
<h5 class="card-title col-12 mb-2">Title card</h5>
<p class="col-12 mb-2">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10"></div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card Orizzontale
ultimo aggiornamento 4/10/24
La card orizzontale e le sue varianti sono caratterizzate dalla classe .orizzontale-card associata alla classe principale .card.
Title Card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
Title Card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
<div class="card orizzontale-card mr-0 mt-4 flex-md-row flex-column">
<div class="col-12 col-md-6 d-flex align-items-center">
<div class="w-100">
<div class="img-wrapper">
<img src="https://dummyimage.com/546x213/ebebeb/808080/?text=546x213" title="img title" alt="imagealt">
</div>
</div>
</div>
<div class="card-body col-12 col-md-6 d-flex flex-wrap align-items-center align-content-center">
<h5 class="card-title mb-0 w-100"><a href="#" title="Lorem Ipsum">Title Card</a></h5>
<p class="card-text w-100 mb-0 pb-2 pb-lg-0 ">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
</div>
</div>
<div class="card orizzontale-card mr-0 mt-4 flex-lg-row flex-column">
<div class="card-body col-12 d-flex flex-wrap align-items-center align-content-center">
<h5 class="card-title w-100"><a href="#" title="Lorem Ipsum">Title Card</a></h5>
<p class="card-text w-100">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
<div class="d-flex w-100 justify-content-start ">
<a href="#" class="d-flex more-info align-items-center" title="lorem ipsum" data-focus-mouse="true">
MAGGIORI INFORMAZIONI
<svg class="icon icon-sm" aria-describedby="icon-title_12">
<title id="icon-title_12">Icon Title</title>
<use href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>Card con CTA
ultimo aggiornamento 25/10/24
Viante della card, con link o bottoni di call-to-action. La variante è caratterizzata dalla classe .cta-card associata alla classe principale .card
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
Card lista Link
ultimo aggiornamento 4/10/24
Solo Versione 3
Varianti della card, pensata per contenere al suo interno un elenco di link.
La card elenco di link e le sue varianti sono caratterizzate dalla classe .links-card associata alla classe principale .card.
ORIENTARSI
Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.
ORIENTARSI
Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.
<div class="bd-example p-5">
<div class="row">
<div class="col-12 col-md-4 col-xl-3 p-2">
<div class="card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="it-list-wrapper p-2">
<h6 class="mb-0 pb-1 pt-1">ORIENTARSI</h6>
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title">Lorem Ipsum</title>
<use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title2">Lorem Ipsum</title>
<use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title3">Lorem Ipsum</title>
<use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title4">Lorem Ipsum</title>
<use aria-describedby="icon-title4" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title5">Lorem Ipsum</title>
<use aria-describedby="icon-title5" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title6">Lorem Ipsum</title>
<use aria-describedby="icon-title6" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-xl-3 p-2">
<div class="card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<div class="it-list-wrapper p-2">
<h6 class="mb-0 pb-1 pt-1">ORIENTARSI</h6>
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title">Lorem Ipsum</title>
<use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title2">Lorem Ipsum</title>
<use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title3">Lorem Ipsum</title>
<use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title4">Lorem Ipsum</title>
<use aria-describedby="icon-title4" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title5">Lorem Ipsum</title>
<use aria-describedby="icon-title5" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon">
<title id="icon-title6">Lorem Ipsum</title>
<use aria-describedby="icon-title6" href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-xl-3 p-2">
<div class="card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<h6 class="mb-0 p-3 pb-0">ORIENTARSI</h6>
<p class="mb-0 p-3 pb-0">Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.</p>
<div class="it-list-wrapper p-3">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title">Lorem Ipsum</title><use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title2">Lorem Ipsum</title><use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title3">Lorem Ipsum</title><use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title4">Lorem Ipsum</title><use aria-describedby="icon-title4" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title5">Lorem Ipsum</title><use aria-describedby="icon-title5" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title6">Lorem Ipsum</title><use aria-describedby="icon-title6" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-xl-3 p-2">
<div class="card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<h6 class="mb-0 p-3 pb-0">ORIENTARSI</h6>
<p class="mb-0 p-3 pb-0">Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.</p>
<div class="it-list-wrapper p-3">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title">Lorem Ipsum</title><use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title2">Lorem Ipsum</title><use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title3">Lorem Ipsum</title><use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title4">Lorem Ipsum</title> <use aria-describedby="icon-title4" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title5">Lorem Ipsum</title><use aria-describedby="icon-title5" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title6">Lorem Ipsum</title><use aria-describedby="icon-title6" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Card Articolo
Esempio di card contenente categorizzazione e data, firma dell’articolo e link all’articolo.
Per inserire la categorizzazione e/o la data di pubblicazione, usare l’elemento .category-top ed inserire al suo interno gli elementi come da esempio.
La categoria nell’esempio seguente è un link, ma potrebbe essere un testo semplice senza link, utilizzando il tag <span> invece del tag <a>
Category
10/12/2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
di Federico De Paolis Leggi di più<div class="row">
<div class="col-12 col-lg-6">
<!--start card-->
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Category</a>
<span class="data">10/12/2018</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card Articolo Grande
La classe .card-bg: utilizzata nel div (card) serve a creare background e ombra della card.
La classe .card-big: utilizzata nel div (card) serve a al dimensionamento dei suoi contenuti.
Nell’esempio seguente è stata inserita un icona grande prima del titolo della card,
il div contenente l’icona è di classe .top-icon.
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.
Leggi di più<div class="row">
<div class="col-12 col-lg-8">
<!--start card-->
<div class="card-wrapper">
<div class="card card-bg card-big">
<div class="card-body">
<div class="top-icon">
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-card"></use>
</svg>
</div>
<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.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card con Immagine
La card con immagine è contraddistinta dalla classe .card-img applicata al div .card.
L’elemento immagine è .img-responsive-wrapper per proporzioni dell’immagine pari a circa 31:19; se associato alla classe .img-responsive-panoramic al proporzione è 31:9,5. Si consiglia in ogni caso un immagine orizzontale.
Qualora le proporzioni non fossero esatte, l’immagine occuperà il massimo dell’altezza o della larghezza disponibile escludendo il resto dell’immagine e centrandola nell’elemento.
È anche possibile aggiungere un piccolo box con l’indicazione della data, per card di tipo evento.
31
dicembre
31
dicembre
<div class="row">
<div class="col-6 col-lg-4">
<!--start card-->
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet</p>
<a class="read-more" href="#"><span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-6 col-lg-4">
<!--start card-->
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
<div class="card-calendar d-flex flex-column justify-content-center">
<span class="card-date">31</span>
<span class="card-day">dicembre</span>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet</p>
<a class="read-more" href="#"><span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-6 col-lg-4"></div>
<div class="col-6 col-lg-4">
<!--start card-->
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive img-responsive-panoramic">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x118/ebebeb/808080/?text=432x118" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet</p>
<a class="read-more" href="#"><span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
<div class="col-6 col-lg-4">
<!--start card-->
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive img-responsive-panoramic">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x118/ebebeb/808080/?text=432x118" title="img title" alt="imagealt">
</figure>
<div class="card-calendar d-flex flex-column justify-content-center">
<span class="card-date">31</span>
<span class="card-day">dicembre</span>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet</p>
<a class="read-more" href="#"><span class="text">Leggi di più</span>
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card Eventi
ultimo aggiornamento 4/10/24
La card eventi è una variante della card ordinaria dedicata alla visualizzazione di appuntamenti o altre occorrenze.
Questa variante della card è caratterizzata della classe .eventi-card in congiunzione con la classe principale .card-wrapper
Solo Versione 3
Da Lunedì 22 Maggio 2023 a Martedì 23 Maggio 2023
Diretta streaming su Unito media della seduta del Senato Accademico
Martedì 23 maggio 2023 alle ore 9, diretta streaming su Unito media
Orari nel programma
<div class="col-6">
<div class="card mr-0 flex-xl-row flex-column">
<div class="img-responsive-wrapper col-12 col-xl-5">
<div class="img-responsive">
<div class="img-wrapper">
<img src="https://dummyimage.com/434x256/ebebeb/808080/?text=434x256" alt="descrizione immagine">
</div>
</div>
</div>
<div class="card-body col-12 col-xl-7 p-2 d-flex flex-wrap align-items-center align-content-center">
<p class="card-text fs-smaller mb-1 w-100">Da Lunedì 22 Maggio 2023 a Martedì 23 Maggio 2023</p>
<h5 class="card-title mb-0 w-100"><a href="#">Diretta streaming su Unito media della seduta del Senato Accademico</a></h5>
<p class="card-text fs-mini mb-0 w-100">Martedì 23 maggio 2023 alle ore 9, diretta streaming su Unito media</p>
<p class="card-text fs-mini mb-1 d-flex flex-wrap align-items-center w-100">
<svg role="img" aria-describedby="icon-orari-title" class="icon icon-xs mr-1">
<title id="icon-orari-title">Orari</title>
<use xlink:href="./dist/svg/sprite.svg#it-clock"></use>
</svg>
<strong>Orari nel programma</strong>
</p>
</div>
</div>
</div>Versione 3.1
INIZIA
LUN
13 MAG
13 MAG
IN PRESENZA E ONLINE
INIZIA
LUN
13 MAG
13 MAG
<div class="col-12 col-md-6 col-xs-4 d-flex">
<div class="card eventi-card mr-0 flex-xl-row flex-column">
<div id="test" class="card-body col-12 d-flex flex-wrap align-items-center align-content-center p-0">
<div class="col-3 h-100 d-flex flex-column data justify-content-center">
<div class="w-100 d-flex justify-content-center text-center">INIZIA</div>
<div class="w-100 dt d-flex justify-content-center text-center">LUN<br>13 MAG</div>
</div>
<div class="col-9 p-2">
<div class="d-flex align-content-center mt-2">
<div class="col-11">
<h5 class="card-title mb-0 w-100 pr-2"><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Alla scoperta delle Arti Performative Digitali - creatività e innovazione</a></h5>
</div>
<div class="col-1"></div></div>
<div class="d-flex w-100 justify-content-end align-items-center mt-2 mb-2">
<div class="modalita"><span class="mr-2">IN PRESENZA E ONLINE</span>
<svg class="icon" aria-describedby="icon-title_999">
<title id="icon-title_999">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-pin"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xs-4 d-flex mt-4">
<div class="card eventi-card mr-0 flex-xl-row flex-column">
<div id="test" class="card-body col-12 d-flex flex-wrap align-items-center align-content-center p-0">
<div class="col-3 h-100 d-flex flex-column data justify-content-center">
<div class="w-100 d-flex justify-content-center text-center">INIZIA</div>
<div class="w-100 dt d-flex justify-content-center text-center">LUN<br>13 MAG</div>
</div>
<div class="col-9 p-2">
<div class="d-flex align-content-center mt-2">
<div class="col-11">
<h5 class="card-title mb-0 w-100 pr-2"><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Alla scoperta delle Arti Performative Digitali - creatività e innovazione</a></h5>
</div>
<div class="col-1"></div></div>
<div class="d-flex w-100 justify-content-end align-items-center mt-2 mb-2">
<div class="modalita"><span class="mr-2">IN PRESENZA</span>
<svg class="icon" aria-describedby="icon-title_998">
<title id="icon-title_998">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-pin"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>Card Archivio - Solo Versione 3.1
ultimo aggiornamento 4/10/24
La card archivio è una variante della card ordinaria dedicata alla visualizzazione di appuntamenti o altre occorrenze avvenute nel passato.
Sabato 6 Luglio 2024 alle ore 09:00
Just For Kids - Evento dedicato ai bambini organizzato da Just The Woman I Am
L'evento si svolge presso il Laghetto di Bardonecchia (piscina comunale, via Mallen 2)
IN PRESENZA
Sabato 6 Luglio 2024 alle ore 09:00
Just For Kids - Evento dedicato ai bambini organizzato da Just The Woman I Am
L'evento si svolge presso il Laghetto di Bardonecchia (piscina comunale, via Mallen 2)
IN PRESENZA
<div class="card archivio-card mr-0 flex-lg-row flex-column">
<div class="card-body col-12 d-flex flex-wrap align-items-center align-content-center">
<p class="card-text mb-1 w-100">Sabato 6 Luglio 2024 alle ore 09:00</p>
<h5 class="card-title mb-0 w-100"><a href="#" title="Lorem Ipsum">Just For Kids - Evento dedicato ai bambini organizzato da Just The Woman I Am</a></h5>
<p class="card-text mb-0 w-100">L'evento si svolge presso il Laghetto di Bardonecchia (piscina comunale, via Mallen 2)</p>
<div class="d-flex w-100 justify-content-end align-items-center mt-2 mb-2">
<div class="modalita">
<span class="mr-2">IN PRESENZA</span>
<svg class="icon" aria-describedby="icon-title_997">
<title id="icon-title_997">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-pin"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="card archivio-card mr-0 mt-4 flex-lg-row flex-column">
<div class="img-responsive-wrapper col-12 col-lg-4">
<div class="img-responsive">
<div class="img-wrapper">
<img src="https://dummyimage.com/432x200/ebebeb/808080/?text=432x200" title="img title" alt="imagealt">
</div>
</div>
</div>
<div class="card-body col-12 col-lg-8 d-flex flex-wrap align-items-center align-content-center">
<p class="card-text mb-1 w-100">Sabato 6 Luglio 2024 alle ore 09:00</p>
<h5 class="card-title mb-0 w-100"><a href="#" title="Lorem Ipsum">Just For Kids - Evento dedicato ai bambini organizzato da Just The Woman I Am</a></h5>
<p class="card-text mb-0 w-100">L'evento si svolge presso il Laghetto di Bardonecchia (piscina comunale, via Mallen 2)</p>
<div class="d-flex w-100 align-content-center align-items-center mt-2 mb-2">
<div class="d-flex w-100 justify-content-end align-items-center mt-2 mb-2">
<div class="modalita">
<span class="mr-2">IN PRESENZA</span>
<svg class="icon" aria-describedby="icon-title_996">
<title id="icon-title_996">Icon Title</title>
<use href="./dist/svg/sprite.svg#unito-pin"></use>
</svg>
</div>
</div>
</div>
</div>
</div>Card Avviso - Solo Versione 3.1
ultimo aggiornamento 4/10/24
Le Card Avviso sono una variante utilizzata per presentare avvisi di servizio o altre informazioni.
UniTo per la Giornata Mondiale della Lingua Greca
Terminata la sincronizzazione
pubblicato il 08/05/2024
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!--start card-->
<div class="card-wrapper avviso-card">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://dummyimage.com/432x234/ebebeb/808080/?text=432x234" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body">
<div class="col-12">
<h5 class="card-title"><a href="#" title="lorem ipsum">UniTo per la Giornata Mondiale della Lingua Greca</a></h5>
<p class="mb-0">Terminata la sincronizzazione</p>
<p class="mt-3 mb-2">pubblicato il 08/05/2024
</p>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card Testimonial - Solo Versione 3.1
ultimo aggiornamento 4/10/24
Le Card Testimonial sono una variante utilizzata per presentare citazioni o testimonianze.
Patrizia Buongiorno
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="testimonial-card">
<div class="testimonial-circle"></div>
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Mario Rossi">
</div>
<div class="testimonial-quote">
<h5 class="text-center mb-2 col-12">Patrizia Buongiorno</h5>
<div class="col-2"><span class="svg-testimonial-mark svg-testimonial-mark-left"></span></div>
<div class="col-8">
<p class="text-left mb-0">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
</div>
<div class="col-2"><span class="svg-testimonial-mark svg-testimonial-mark-right"></span></div>
</div>
</div>
</div>
</div>Card Video Unitomedia - Solo Versione 3.1
ultimo aggiornamento 4/10/24
La variante video della card, caratterizzata dall'icona che richiama il bottone play di un video, fa uso della classe .video-unito-card in congiunzione con la classe principale .card-wrapper
<div class="row">
<div class="col-6 col-lg-4">
<!--start card-->
<div class="card-wrapper video-unito-card">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="https://tema.unito.it/v3/assets/images/card-multimedia.jpg" title="img title" alt="imagealt">
</figure>
</div>
</div>
<div class="card-body">
<div class="col-11">
<h5 class="card-title"><a href="#" title="lorem ipsum">UniTo per la Giornata Mondiale della Lingua Greca</a></h5>
</div>
<div class="col-1">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon" width="27" height="27" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
<title id="icon-title">Icon Title</title>
<path d="M16 9.6748L0.25 18.7681L0.25 0.581538L16 9.6748Z" fill="white" aria-describedby="icon-title"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Card Video Custom - Solo Versione 3.1
ultimo aggiornamento 4/10/24
LA variante card video custom è dedicata ad ospitare contenuti video. Le varianti sono caratterizzate dalla classe .video-custom-card o .video-custom-card.video-custom-card-small in congiunzione con la classe principale .card-wrapper
La dimensione orizzontale e verticale del video è gestita da Bootstrap via javascript a partire dalla dimensione del file sorgente, in esempio 960x400
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.
Lorem ipsum dolor sit amet consectetur
<div class="card video-custom-card mr-0 mt-4 flex-lg-row flex-column">
<div class="col-12 col-lg-6 d-flex align-items-center">
<video controls data-bs-video poster="https://tema.unito.it/v3/assets/images/video_custom_poster.jpg">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
</div>
<div class="video-wrapper col-12 col-lg-6">
<div class="video-bg h-100 d-flex">
<div class="card-body p-0 w-100 d-flex flex-wrap align-items-center align-content-center">
<div class="p-4">
<h5 class="card-title mb-0 w-100">Lorem ipsum dolor sit amet consectetur</h5>
<p class="card-text w-100 mb-0 pb-2 pb-lg-0 ">Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh. Lorem ipsum dolor sit amet consectetur. Nulla eu amet bibendum aliquam fusce mattis nibh.</p>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex col-12 col-md-6 col-lg-4 col-xl-3">
<div class="card video-custom-card video-custom-card-small col-12 mr-0 mt-4 flex-column">
<div class="col-12 d-flex align-items-center">
<video controls data-bs-video poster="https://tema.unito.it/v3/assets/images/video_custom_poster.jpg">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
</div>
<div class="video-wrapper col-12">
<div class="video-bg h-100 d-flex">
<div class="card-body p-0 w-100 d-flex flex-wrap align-items-center align-content-center">
<div class="p-4 w-100">
<h5 class="card-title mb-0 w-75 text-center m-auto">Lorem ipsum dolor sit amet consectetur</h5>
</div>
</div>
</div>
</div>
</div>
</div>