Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Card (To be)

Card (To be)

Lavori in corso sulle nuove Card di .italia

Card struttura

ATTENZIONE: durante le lavorazione in questa PR il componente Card classico è rotto, in tutte le sue varianti. È stato infatti commentato il CSS per intero in modo da lavorare per semplificare. A fine lavorazioni l’obiettivo è far convivere per un po’ di tempo i CSS per le nuove Card To Be insieme alle vecchie, per permettere un graduale passaggio.

Appunti: da sinistra a destra: con bordo e ombra shadow-sm; con solo ombra shadow; con ombra shadow-lg e immagine panoramica .img-responsive-panoramic.

Appunti: i titoli sono h3 e i sottotitoli o periodi h4. Questa gerarchia è corretta se il gruppo di card è contenuto dentro un livello h2. Andrà quindi aggiustata rispetto al contesto.

Appunti: classi utilità:

  • .card-height-full e card-height-auto per gestire le altezze, per es. quando più card affiancate
  • .card-border-top e relativo colore card-border-top-COLORE
  • .card-img per card con immagini
  • .card-title-icon per titoli con icona a lato
  • .card-footer per racchiudere una eventuale azione o link secondari nel piede

Appunti: occhio alla semantica:

  • article è la card stessa (da verificare se anche per quelle di servizio e/o presentazione)
    • footer è il piede della card, con le cose correlate (data, categoria, argomenti, status, …) [ DA VERIFICARE ]
    • time si usa per le date, abbastanza standard attributo datetime per gli SR [ DA VERIFICARE ]
    • i link secondari della card sono ora in un div .card-footer, forse dovrebbero stare in un aside?

Appunti: occhio alle info necessarie per Lettori schermo, in particolar modo sui metadati:

  • nascoste con .visually-hidden (es. “Categoria correlata: “, “Argomento correlato: “) o applicate con aria-label (es. “Argomenti correlati: “)

Appunti: griglia base a 3 colonne su lg.

Appunti to do extra: pseudo element trick for full focus on main link/click/touch…

Featured
Descrizione immagine se ha senso nel contesto, sennò marcare con decorativa lasciando l'alt applicato ma vuoto.
Featured

Featured

Featured

Titolo contenuto può essere anche lungo così o andare oltre

Sottotitolo o periodo

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

Se ci fosse un secondo paragrafo Card body link questa è la resa visiva.

Card body link Another card body link
Card link Another link Go somewhere
Azione secondaria Link secondario
descrizione immagine

Titolo h3

Sottotitolo o periodo h4

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

Link secondario
descrizione immagine

Titolo h3

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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

<div class="row card-to-be">
  <div class="col-12 col-md-6 mb-3 mb-md-4 col-lg-4">
    <!--start card-->
    <article class="card card-img card-height-full card-border-top card-border-top-test rounded shadow-sm border">
      <div class="card-header">
        Featured
      </div>
      <div class="img-responsive-wrapper">
        <div class="img-responsive Zimg-responsive-panoramic">
          <figure class="img-wrapper">
            <img src="https://placehold.co/357x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" title="titolo immagine" alt="Descrizione immagine se ha senso nel contesto, sennò marcare con decorativa lasciando l'alt applicato ma vuoto.">
          </figure>
        </div>
      </div>
      <div class="card-header">
        Featured
      </div>
      <h2 class="card-header h6">
        Featured
      </h2>
      <h2 class="card-header">
        Featured
      </h2>
      <div class="card-header border-bottom-0">
      <ul class="nav nav-tabs nav-tabs-cards card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      </div>
      <div class="card-body">
        <h3 class="card-title card-title-icon h3 ">
          <a href="#">Titolo contenuto può essere anche lungo così o andare oltre</a>
          <div><svg class="icon icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-file"></use></svg></div>
        </h3>
        <h4 class="card-subtitle h4 ">Sottotitolo o periodo</h4>
        <p class="card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <p class="card-text">Se ci fosse un secondo paragrafo <a href="#" class="card-link">Card body link</a> questa è la resa visiva.</p>
        <a href="#" class="card-link">Card body link</a>
        <a href="#" class="card-link">Another card body link</a>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
          <li class="list-group-item"><a href="#" class="card-link">Another link</a></li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-body">
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        <footer>
          <div class="card-related">
            <a href="#" class="card-category card-link"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
            <ul class="card-chips chips-list" aria-label="Argomenti correlati: ">
              <li class="list-item"><a class="chip chip-simple chip-sm" href="#">
                <span class="chip-label">Sviluppo interfaccia</span>
              </a></li>
              <li class="list-item"><a class="chip chip-simple chip-sm" href="#">
                <span class="chip-label">Open source</span>
              </a></li>
            </ul>
          </div>
          <time class="card-date" datetime="10/12/2025">12 ottobre, 2025</time>
        </footer>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-primary">Azione secondaria</a>
        <a href="#" class="card-link">Link secondario</a>
      </div>
    </article>
    <!--end card-->
  </div>
  <div class="col-12 col-md-6 mb-3 mb-md-4 col-lg-4">
    <!--start card-->
    <article class="card card-img card-height-full rounded shadow">
      <div class="img-responsive-wrapper">
        <div class="img-responsive Zimg-responsive-panoramic">
          <figure class="img-wrapper">
            <img src="https://placehold.co/357x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" title="titolo immagine" alt="descrizione immagine">
          </figure>
        </div>
      </div>
      <div class="card-body">
        <h3 class="card-title h3 ">
          <a href="#">Titolo h3</a>
        </h3>
        <h4 class="card-subtitle h4 ">Sottotitolo o periodo h4</h4>
        <p class="card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer>
          <div class="card-related">
            <ul class="card-chips chips-list" aria-label="Argomenti correlati: ">
              <li class="list-item"><a class="chip chip-simple chip-sm" href="#">
                <span class="chip-label">Art direction</span>
              </a></li>
            </ul>
          </div>
          <time class="card-date" datetime="10/12/2025">12 ottobre, 2025</time>
        </footer>
      </div>
      <div class="card-footer">
        <a href="#" class="card-link">Link secondario</a>
      </div>
    </article>
    <!--end card-->
  </div>
  <div class="col-12 col-md-6 mb-3 mb-md-4 col-lg-4">
    <!--start card-->
    <article class="card card-img rounded shadow-lg mb-3">
      <div class="img-responsive-wrapper">
        <div class="img-responsive img-responsive-panoramic">
          <figure class="img-wrapper">
            <img src="https://placehold.co/357x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO" title="titolo immagine" alt="descrizione immagine">
          </figure>
        </div>
      </div>
      <div class="card-body">
        <h3 class="card-title h3 ">
          <a href="#">Titolo h3</a>
        </h3>
        <p class="card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
        <footer>
          <time class="card-date" datetime="10/12/2025">12 ottobre, 2025</time>
        </footer>
      </div>
    </article>
    <!--end card-->
    <!--start card-->
    <article class="card rounded shadow-sm border">
      <div class="card-body">
        <h4 class="card-title card-title-icon h5 ">
          <a href="#">Titolo un po' lungo ad esempio di un bando a cui poter partecipare h4 visto h5</a>
          <div><svg class="icon icon-primary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-file"></use></svg></div>
        </h4>
        <h5 class="card-subtitle h6 ">Sottotitolo o periodo h5 visto h6</h5>
        <footer>
          <div class="card-related">
            <ul class="card-chips chips-list" aria-label="Stato della lavorazione: ">
              <li class="list-item"><a class="chip chip-simple chip-sm chip-success" href="#">
                <span class="chip-label">Aperto</span>
              </a></li>
            </ul>
          </div>
          <span class="card-date text-warning"><strong>Scadenza: </strong><time class="card-date text-warning" datetime="10/12/2025">31 gennaio, 2025</time></span>
        </footer>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-primary btn-xs btn-icon Zd-md-block">
          <span>Etichetta pulsante</span>
          <svg class="icon icon-primary ms-2"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
        </a>
      </div>
    </article>
    <!--end card-->
  </div>
</div>