Card
Le Card sono dei contenitori di contenuti ed azioni relative ad una data informazione.
Possono accogliere un titolo, un paragrafo, un’immagine e una call to action formata da un link di grandezza variabile a seconda delle necessità, posizionato sempre in basso (lateralmente o al centro).
Le distanze dai margini sono date da uno spazio di 24 px in tutti i lati della card.
Le card, adattabili e ridimensionabili, sono un elemento modulare che facilita la trasposizione responsive del design.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
</div>
<p class="card-title h5">Dolor sit amet</p>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary btn-xs">Scopri di più</button>
</div>
</div>
</div>Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card con foto
Nella versione con foto la metà dello spazio viene destinato ad un’immagine posizionata nella parte superiore della card.
Per motivi di accessibilità, il testo della card non deve essere mai posizionato sopra le immagini.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="img-responsive-wrapper rounded-top">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
</figure>
</div>
</div>
<div class="card-body">
<a class="category" href="#">Lorem ipsum</a>
<p class="card-title h5">Dolor sit amet</p>
<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>Card con link
Con la versione card con link è possibile avere dei sottolink in calce alla card.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="img-responsive-wrapper rounded-top">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
</figure>
</div>
</div>
<div class="card-body">
<p class="card-title h5">Dolor sit amet</p>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">Cras justo odio</a></li>
<li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
<li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
</ul>
</div>
</div>
</div>Card con foto e call to action
All’interno delle card è possibile inserire anche una call-to action, con le modalità già spiegate e un testo di categorizzazione sopra la card.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-header">
<a class="category" href="#">Category</a>
</div>
<div class="card-body">
<p class="card-title h5">Dolor sit amet</p>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary btn-xs">Scopri di più</button>
</div>
</div>
</div>Dimensionamento delle card
Negli esempi seguenti le card sono all’interno di una struttura colonnare di Bootstrap.
Se non si specifica la larghezza delle colonne, le card tenderanno ad occupare tutto lo spazio disponibile nella row.
L’altezza di ogni card dipenderà dal suo contenuto.
<div class="row">
<div class="col">
. . .
</div>
<div class="col">
. . .
</div>
<div class="col">
. . .
</div>
</div>Specificando la larghezza delle colonne è possibile controllare la larghezza delle card.
L’altezza verrà parificata su tutta la riga, e sarà uguale a quella della card con il contenuto maggiore.
<div class="row">
<div class="col-12 col-lg-4">
. . .
</div>
<div class="col-12 col-lg-4">
. . .
</div>
<div class="col-12 col-lg-4">
. . .
</div>
</div>