Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Card

Card

Questo è un nuovo componente card

Questo componente card e le sue varianti sono definiti dalle classi .it-card e relativi modificatori.

Il precedente componente basato sulla classe .card è deprecato, e le sue classi di stile saranno mantenute fino al prossimo rilascio maggiore, per permettere una migrazione graduale.

Vai alla documentazione del componente card old (deprecato)

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.
Inoltre arrotondamento, bordo e ombreggiatura sono fissati nel modo seguente:
border-radius: 8px !important;
border-style: none !important;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1) !important;

Le card, adattabili e ridimensionabili, sono un elemento modulare che facilita la trasposizione responsive del design.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="row">
  <div class="col-12 col-lg-4">
    <article class="it-card it-card-height-fullmb-3">
      <h5 class="it-card-title ">
        <a href="#">Titolo del servizio</a>
      </h5>
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
          </div>
        </footer>
      </div>
    </article>
  </div>
</div>

Per gruppi numerosi di card, utilizzare liste semantiche <ul> con classe .it-card-list combinandole con il sistema di colonne.

Esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<ul class="it-card-list row" aria-label="Risultati della ricerca: ">
  <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Primo risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
  <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Secondo risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
  <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Terzo risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
  <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Quarto risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
    <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Quinto risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
  <li class="col-12 col-md-6 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Sesto risultato</a>
      </h5>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </li>
</ul>

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.

Titolo del contenuto
parcheggio bike sharing a Milano

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div class="row">
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Titolo del contenuto</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-16x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-6 col-lg-6 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Titolo del contenuto</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-16x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
      </div>
    </article>
    <!--end it-card-->
  </div>
</div>

Con la versione card con link è possibile avere dei sottolink in calce alla card.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div class="row">
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Argomento Y</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-21x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Descrizione breve dell'argomento in poche righe non troncate.</p>
        <ul class="list-group list-group-flush" aria-label="Contenuti in evidenza:">
          <li class="list-group-item"><a href="#">Titolo notizia affine</a></li>
          <li class="list-group-item"><a href="#">Titolo media affine</a></li>
          <li class="list-group-item"><a href="#">Altro titolo scheda affine</a></li>
          <li class="list-group-item"><a href="#">Pagina profilo affine</a></li>
        </ul>
      </div>
    </article>
    <!--end it-card-->
  </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.

Argomento Y
parcheggio bike sharing a Milano

Descrizione breve dell'argomento in poche righe non troncate.

Argomento Y
parcheggio bike sharing a Milano

Descrizione breve dell'argomento in poche righe non troncate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<div class="row">
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Argomento Y</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-21x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Descrizione breve dell'argomento in poche righe non troncate.</p>
        <button type="button" class="btn btn-xs btn-primary">Registrati</button>
      </div>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
      <article class="it-card mb-3">
      <h5 class="it-card-title ">
        <a href="#">Titolo del servizio</a>
      </h5>
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <button type="button" class="btn btn-xs btn-primary">Registrati</button>
        <footer class="it-card-related">
          <div class="it-card-taxonomy">
            <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
          </div>
        </footer>
      </div>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Argomento Y</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-21x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Descrizione breve dell'argomento in poche righe non troncate.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class=" it-card-footer">
        <button type="button" class="btn btn-primary">Compila il form</button>
      </footer>
    </article>
    <!--end it-card-->
  </div>
</div>

Dimensionamento delle card

Per la gestione delle altezze in caso di gruppi di card, l’impostazione di base è l’altezza basata sul contenuto.

Per cambiare questo comportamento per ogni card va usata la classe .it-card-height-full (altezza basata su tutto lo spazio disponibile) sull’elemento article .it-card.

Argomento Y
parcheggio bike sharing a Milano

Descrizione breve dell'argomento in poche righe non troncate.

Argomento Y
parcheggio bike sharing a Milano

Descrizione breve dell'argomento in poche righe non troncate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<div class="row">
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Argomento Y</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-21x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Descrizione breve dell'argomento in poche righe non troncate.</p>
        <button type="button" class="btn btn-xs btn-primary">Registrati</button>
      </div>
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
      <article class="it-card it-card-height-full mb-3">
      <h5 class="it-card-title ">
        <a href="#">Titolo del servizio</a>
      </h5>
      <div class="it-card-body">
        <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <button type="button" class="btn btn-xs btn-primary">Registrati</button>
      </div>
      <footer class="it-card-related it-card-footer">
        <div class="it-card-taxonomy">
          <a href="#" class="it-card-category it-card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
        </div>
      </footer>      
    </article>
    <!--end it-card-->
  </div>
  <div class="col-12 col-md-4 col-lg-4 mb-3 mb-md-4">
    <!--start it-card-->
    <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
      <!--card first child is the title (link)-->
      <h5 class="it-card-title ">
        <a href="#">Argomento Y</a>
      </h5>
      <!--card second child is the image (optional)-->
      <div class="it-card-image-wrapper">
        <div class="ratio ratio-21x9">
          <figure class="figure img-full">
            <img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano" />
          </figure>
        </div>
      </div>
      <!--card body content-->
      <div class="it-card-body">
        <p class="it-card-text">Descrizione breve dell'argomento in poche righe non troncate.</p>
      </div>
      <!--finally the card footer metadata-->
      <footer class=" it-card-footer">
        <button type="button" class="btn btn-primary">Compila il form</button>
      </footer>
    </article>
    <!--end it-card-->
  </div>
</div>

Documentazione tecnica

Per ulteriori dettagli sulle possibili opzioni per questo componente si consulti la documentazione tecnica alla voce: