Card
Un contenitore di testi e immagini con molte opzioni e varianti.
Card semplice
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.
Negli esempi seguenti le card sono all’interno di una struttura colonnare di bootstrap.
L’inizio della card vera e propria è segnalata dal commento start card
Per inserire la categorizzazione con relativa icona, usare l’elemento .categoryicon-top ed inserire al suo interno gli elementi come da esempio.
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">
<!--start card-->
<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>
<!--end card-->
</div>
</div>Card con elenco di link
Variante della card con al suo interni un elenco di link; nell'esempio, con icona in negativo.
<div class="row">
<div class="col-12 col-lg-4">
<!--start card-->
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="categoryicon-top">
<svg class="icon negative">
<use xlink:href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
<span class="text">Lorem Ipsum</span>
</div>
<div class="it-list-wrapper">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-external-link"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-external-link"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-external-link"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end card-->
</div>
</div>Articolo semplice
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>
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 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.
<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://via.placeholder.com/434x256/ebebeb/808080/?text=434x256" 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://via.placeholder.com/434x256/ebebeb/808080/?text=434x256" 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://via.placeholder.com/434x256/ebebeb/808080/?text=434x256" 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">
<!--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://via.placeholder.com/434x128/ebebeb/808080/?text=434x128" 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://via.placeholder.com/434x128/ebebeb/808080/?text=434x128" 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://via.placeholder.com/434x128/ebebeb/808080/?text=434x128" 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
La card con immagine è una variante della card ordinaria ottenuta tramite l'uso di utility classes, che offre più risalto per il contenuto visivo e per le informazioni descrittive del contenuto.
Il comportamento responsive del componente è determinato dall'uso delle classi .flex-column e .flex-xl-row che assieme alle classi di griglia .col utilizzate, risultano - nel codice in esempio - con l'immagine affiancata a partire dal Breakpoint XL, prima del quale l'immagine viene visualizzata al di sopra del testo descrittivo.
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://via.placeholder.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>