Tile
I tile mostrano anteprime di contenuti con uno sfondo a motivo e un'area immagine in evidenza. Usali per integrazioni, template o gallerie visive.
I tile mostrano anteprime incentrate sulle immagini con sfondi a motivo. Usali al posto delle Card quando uno screenshot o un logo conta più del testo: pagine di integrazioni, gallerie di template e pagine ricche di immagini.
Usa i Tile quando:
- Le anteprime visive sono più importanti delle descrizioni testuali
- Presenti integrazioni con loghi o screenshot
- Costruisci gallerie di template, temi o esempi
- Mostri screenshot con titoli e descrizioni facoltative
Note: Gli screenshot mostrano l'interfaccia in inglese.
Utilizzo
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>Riquadro di base
Un tile semplice con un'immagine di anteprima e un titolo:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>Riquadro con descrizione
Aggiungi una descrizione per maggiore contesto:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>Tile e Card a confronto
| Caratteristica | Tile | Card |
|---|---|---|
| Enfasi visiva | Incentrata sulle immagini con sfondo a motivo | Icona + titolo + descrizione |
| Ideale per | Integrazioni, template, gallerie | Navigazione, elenchi di funzionalità, CTA |
| Gestione immagini | Ampia area di anteprima | Icona piccola |
| Contenuto testuale | Titolo + descrizione facoltativa | Titolo + descrizione + icona |
Regola pratica: usa Tile per uno screenshot o un logo. Usa Card per contenuti ricchi di testo.
Layout a griglia
Usa Columns per visualizzare più Tile in una griglia:
Immagini in modalità scura
Usa le classi Tailwind per mostrare immagini diverse in modalità chiara e scura:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mwdojjfh" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mwdojjfh" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>L'attributo noStyle disattiva lo stile predefinito delle immagini. Senza di esso, le classi della modalità scura non funzionano correttamente.
Proprietà
L'URL a cui il tile rimanda. Accetta percorsi interni (/it/docs/intro) o URL esterni (https://example.com). I link esterni si aprono in una nuova scheda.
Testo del titolo mostrato sotto l'area di anteprima.
Testo descrittivo facoltativo sotto il titolo.
Contenuto da mostrare nell'area di anteprima. Tipicamente immagini o SVG.