Scheda
Scopri come usare il componente Card per creare contenitori cliccabili e stilizzati con icone, immagini, link e CTA nei layout a griglia.
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
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Scheda di base
Una scheda semplice con un titolo:
<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="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Scheda con link
Le schede possono collegarsi ad altre pagine:
<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="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>I link esterni mostrano automaticamente la freccia:
<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="/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="/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="Visual Guide" img="/_jd/images/card-example.webp?v=msuxsk5d">
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="/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à
Titolo visualizzato nella parte superiore della scheda.
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.
URL a cui rimanda la scheda. Può essere interno (/docs/intro) o esterno (https://example.com).
Percorso di un'immagine visualizzata nella parte superiore della scheda.
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.
Testo personalizzato di invito all'azione visualizzato sotto il contenuto della scheda. È visibile solo quando viene fornito anche href.
Proprietà di Columns
Numero di colonne nella griglia. Accetta 1, 2, 3 o 4.