---
title: Scheda
description: >-
  Scopri come usare il componente Card per creare contenitori cliccabili e
  stilizzati con icone, immagini, link e CTA nei layout a griglia.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Il componente `<Card>` è un contenitore cliccabile e stilizzato. Usalo per collegarti ad altre pagine o raggruppare contenuti correlati. Abbina le schede a `<Columns>` per creare layout a griglia.

## Utilizzo

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Scheda di base

Una scheda semplice con un titolo:

<Card title="Per iniziare">
  Configura il tuo primo progetto in meno di cinque minuti.
</Card>

```mdx
<Card title="Getting Started">
  Set up your first project in under five minutes.
</Card>
```

## Scheda con icona

Aggiungi un'icona per rendere le schede più distintive:

<Card title="Documentazione" icon="book">
  Esplora la documentazione completa per scoprire tutte le funzionalità.
</Card>

```mdx
<Card title="Documentation" icon="book">
  Explore our complete documentation to learn all features.
</Card>
```

## Scheda con link

Le schede possono collegarsi ad altre pagine:

<Card title="Documentazione API" icon="code" href="/it/introduction">
  Visualizza la documentazione completa dell'API.
</Card>

```mdx
<Card title="API Reference" icon="code" href="/introduction">
  View the complete API documentation.
</Card>
```

## Scheda con freccia

Aggiungi un indicatore a forma di freccia per mostrare che la scheda contiene un link. Le frecce vengono visualizzate automaticamente per i link esterni, ma puoi abilitarle anche per i link interni:

<Card title="Quickstart" icon="github" href="/it/quickstart" arrow={true}>
  Consulta il codice sorgente e contribuisci.
</Card>

```mdx
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
  Check out the source code and contribute.
</Card>
```

I link esterni mostrano automaticamente la freccia:

<Card title="Risorsa esterna" href="https://example.com">
  Questa scheda rimanda a un sito esterno.
</Card>

```mdx
<Card title="External Resource" href="https://example.com">
  This card links to an external site.
</Card>
```

## Scheda con CTA

Aggiungi un testo di invito all'azione sotto il contenuto della scheda:

<Card title="Quickstart" icon="star" href="/it/quickstart" cta="Esegui subito l'upgrade">
  Sblocca funzionalità avanzate e supporto prioritario.
</Card>

```mdx
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
  Unlock advanced features and priority support.
</Card>
```

Combina freccia e CTA per ottenere la massima evidenza:

<Card title="Quickstart" icon="rocket" href="/it/quickstart" arrow={true} cta="Inizia a creare">
  Tutto ciò che ti serve per avviare il tuo primo progetto.
</Card>

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
  Everything you need to launch your first project.
</Card>
```

## Scheda con immagine

Visualizza un'immagine nella parte superiore della scheda:

<Card title="Guida visiva" img="/images/card-example-1.webp">
  Una scheda con intestazione illustrata.
</Card>

```mdx
<Card title="Visual Guide" img="/images/card-example.webp">
  A card featuring an image header.
</Card>
```

## Griglia di schede con Columns

Usa `Columns` per disporre più schede in una griglia adattiva:

<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/it/quickstart">
    Inizia a lavorare in pochi minuti.
  </Card>
  <Card title="Tutorial" icon="graduation-cap" href="/it/content/mdx-basics">
    Percorsi di apprendimento passo passo.
  </Card>
  <Card title="Esempi" icon="flask" href="/it/components/overview">
    Esempi di codice realistici.
  </Card>
</Columns>

```mdx
<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running in minutes.
  </Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
    Step-by-step learning paths.
  </Card>
  <Card title="Examples" icon="flask" href="/components/overview">
    Real-world code examples.
  </Card>

</Columns>
```

### Layout a tre colonne

<Columns cols={3}>
  <Card title="Documenti" icon="book">
    Documentazione
  </Card>
  <Card title="API" icon="code">
    Documentazione API
  </Card>
  <Card title="Blog" icon="newspaper">
    Ultimi aggiornamenti
  </Card>
</Columns>

```mdx
<Columns cols={3}>
  <Card title="Docs" icon="book">
    Documentation
  </Card>
  <Card title="API" icon="code">
    API Reference
  </Card>
  <Card title="Blog" icon="newspaper">
    Latest updates
  </Card>
</Columns>
```

## Proprietà

<ParamField name="title" type="string" required>
  Titolo visualizzato nella parte superiore della scheda.
</ParamField>

<ParamField name="icon" type="string">
  Nome dell'icona Font Awesome (ad es. "book", "code", "rocket"). Per impostazione predefinita viene usata la variante Solid; aggiungi un prefisso di stile come `light/book` per modificare lo spessore. Consulta [Icone](/it/content/icons).
</ParamField>

<ParamField name="href" type="string">
  URL a cui rimanda la scheda. Può essere interno (`/docs/intro`) o esterno (`https://example.com`).
</ParamField>

<ParamField name="img" type="string">
  Percorso di un'immagine visualizzata nella parte superiore della scheda.
</ParamField>

<ParamField name="arrow" type="boolean">
  Mostra un indicatore a forma di freccia (↗) nell'angolo superiore destro. Viene abilitato automaticamente per i link esterni (URL che iniziano con `http://` o `https://`). Imposta `true` per mostrarlo sui link interni o `false` per nasconderlo sui link esterni.
</ParamField>

<ParamField name="cta" type="string">
  Testo personalizzato di invito all'azione visualizzato sotto il contenuto della scheda. È visibile solo quando viene fornito anche `href`.
</ParamField>

## Proprietà di Columns

<ParamField name="cols" type="number" default="2">
  Numero di colonne nella griglia. Accetta 1, 2, 3 o 4.
</ParamField>

## Qual è il prossimo passo?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>