Card
Scopri come usare il componente Card per creare contenitori cliccabili e stilizzati con icone, immagini, link e CTA in layout a griglia.
Il componente <Card> è un contenitore cliccabile e stilizzato. Usalo per collegarti ad altre pagine o per raggruppare contenuti correlati. Abbina le card a <Columns> per creare layout a griglia.
Utilizzo
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Scheda di base
Una card con titolo:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Scheda con icona
Aggiungi un'icona:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Scheda con link
Le card possono collegarsi ad altre pagine:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Scheda con freccia
Aggiungi una freccia per indicare che la card è un link. I link esterni mostrano la freccia automaticamente. Attivala per i link interni con arrow={true}:
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>I link esterni mostrano la freccia automaticamente:
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Scheda con CTA
Aggiungi un testo di call-to-action sotto il contenuto della card:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combina freccia e CTA:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Scheda con immagine
Mostra un'immagine in cima alla card:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=mwdojjfh">
A card featuring an image header.
</Card>Griglia di schede con Columns
Disponi le card in una griglia responsive con Columns:
<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="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>Proprietà
Il titolo mostrato in cima alla card.
Nome dell'icona Font Awesome (ad esempio "book", "code", "rocket"). Viene visualizzata per impostazione predefinita nella variante Solid. Aggiungi un prefisso di stile come light/book per cambiarne lo spessore. Vedi Icone.
URL a cui la card rimanda. Può essere interno (/docs/intro) o esterno (https://example.com).
Percorso di un'immagine mostrata in cima alla card.
Mostra un indicatore a freccia (↗) nell'angolo in alto a destra. Viene attivato automaticamente per i link esterni (URL che iniziano con http:// o https://). Impostalo su true per mostrarlo sui link interni, oppure su false per nasconderlo sui link esterni.
Testo personalizzato di call-to-action mostrato sotto il contenuto della card. Appare solo quando href è impostato.
Proprietà di Columns
Numero di colonne della griglia. Accetta 1, 2, 3 o 4.