Riquadro
I riquadri mostrano anteprime con sfondi a motivi e un'area immagini prominente, ideali per integrazioni, template e gallerie visive.
I riquadri mostrano anteprime incentrate sulle immagini con sfondi a motivi. Usali al posto delle Card quando uno screenshot o un logo è più importante del testo: pagine di integrazione, gallerie di template e pagine ricche di immagini.
Gli screenshot mostrano l'interfaccia in inglese.
Usa i riquadri quando:
- Le anteprime visive sono più importanti delle descrizioni testuali
- Presenti integrazioni con loghi o screenshot
- Crei gallerie di template, temi o esempi
- Mostri screenshot con titoli e descrizioni facoltative
Utilizzo
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msuxsk5d" alt="Tabs" />
</Tile>Riquadro di base
Un riquadro semplice con un'immagine di anteprima e un titolo:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msuxsk5d" alt="Tabs" />
</Tile>Riquadro con descrizione
Aggiungi una descrizione per fornire più contesto:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=msuxsk5d" alt="Tabs" />
</Tile>Tile e Card a confronto
| Funzionalità | Tile | Card |
|---|---|---|
| Enfasi visiva | Immagine in primo piano con sfondo a motivi | Icona + titolo + descrizione |
| Ideale per | Integrazioni, template, gallerie | Navigazione, elenchi di funzionalità, CTA |
| Gestione delle immagini | Ampia area di anteprima | Icona piccola |
| Contenuto testuale | Titolo + descrizione facoltativa | Titolo + descrizione + icona |
Regola generale: se hai uno screenshot o un logo da mostrare, usa Tile. Se il contenuto è principalmente testuale, usa Card.
Layout a griglia
Usa Columns per visualizzare più riquadri 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=msuxsk5d" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=msuxsk5d" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>L'attributo noStyle impedisce lo stile predefinito delle immagini, consentendo il corretto funzionamento delle classi della modalità scura.
Proprietà
L'URL a cui rimanda il riquadro. Supporta sia percorsi interni (/docs/intro) sia URL esterni (https://example.com). I link esterni si aprono in una nuova scheda.
Testo del titolo visualizzato sotto l'area di anteprima.
Testo descrittivo facoltativo sotto il titolo.
Contenuto da visualizzare nell'area di anteprima. In genere immagini o SVG.