Usa le schede per creare contenitori visivi per i contenuti. Le schede sono contenitori flessibili che possono includere testo, icone, immagini e link.

​
Scheda di base

Titolo scheda

Ecco come usare una scheda con un’icona e un link. Cliccando su questa scheda si viene indirizzati alla pagina Columns.
Card example
<Card title="Card title" icon="text" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

​
Varianti di schede

Le schede offrono diverse opzioni di layout e di stile per adattarsi a esigenze di contenuto differenti.

​
Layout orizzontale

Aggiungi la proprietà horizontal per visualizzare le card in un layout orizzontale più compatto.

Card orizzontale

Questo è un esempio di card orizzontale.
Horizontal card example
<Card title="Horizontal card" icon="text" horizontal>
  This is an example of a horizontal card.
</Card>

​
Schede con immagine

Aggiungi la proprietà img per visualizzare un’immagine nella parte superiore della scheda.
yosemite

Scheda con immagine

Questo è un esempio di scheda con un’immagine.
Esempio di scheda con immagine
<Card title="Scheda con immagine" img="/images/card-with-image.png">
  Questo è un esempio di scheda con un’immagine.
</Card>
Puoi personalizzare il testo della call-to-action e decidere se mostrare una freccia. Per impostazione predefinita, le frecce compaiono solo per i link esterni.

Link card

Questo è un esempio di scheda con un’icona e un link. Facendo clic su questa scheda, verrai reindirizzato alla pagina Columns.
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

​
Raggruppare le card

Usa il componente Columns per disporre più card una accanto all’altra.

First card

Questa è la prima card.

Second card

Questa è la seconda card.
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    Questa è la prima card.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    Questa è la seconda card.
  </Card>
</Columns>

​
Proprietà

​
title
string
required
Titolo visualizzato sulla scheda
​
icon
string
L’icona da visualizzare.Opzioni:
  • Nome dell’icona Font Awesome
  • Nome dell’icona Lucide
  • Codice SVG compatibile con JSX racchiuso tra parentesi graffe
  • URL di un’icona ospitata esternamente
  • Percorso di un file icona nel tuo progetto
Per icone SVG personalizzate:
  1. Converti il tuo SVG con il convertitore SVGR.
  2. Incolla il tuo codice SVG nel campo di input SVG.
  3. Copia l’elemento completo <svg>...</svg> dal campo di output JSX.
  4. Racchiudi il codice SVG compatibile con JSX tra parentesi graffe: icon={<svg ...> ... </svg>}.
  5. Regola height e width secondo necessità.
​
iconType
string
Lo stile dell’icona Font Awesome. Utilizzato solo con le icone Font Awesome.Opzioni: regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Colore dell’icona in formato esadecimale (es. #FF6B6B).
​
href
string
URL a cui andare quando si fa clic sulla scheda.
​
horizontal
boolean
Visualizza la scheda in un layout orizzontale compatto.
​
img
string
URL o percorso locale di un’immagine visualizzata nella parte superiore della scheda.
​
cta
string
Testo personalizzato per il pulsante di azione.
​
arrow
boolean
Mostra o nasconde l’icona della freccia del link.