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>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 card-space">
<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 l’ottimo è 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di piùLorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di piùLorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di piùLorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più<div class="row">
<div class="col-12 col-lg-6">
<!--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/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" 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"></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-12 col-lg-6">
<!--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/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" 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"></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-12 col-lg-6">
<!--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/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" 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"></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-12 col-lg-6">
<!--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/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" 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">novembre</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"></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>
</div>