---
title: Riquadro
description: I riquadri mostrano anteprime con sfondi a motivi e un'area immagini prominente, ideali per integrazioni, template e gallerie visive.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
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
```mdx
```
## Riquadro di base
Un riquadro semplice con un'immagine di anteprima e un titolo:
```mdx
```
## Riquadro con descrizione
Aggiungi una descrizione per fornire più contesto:
```mdx
```
## 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:
```mdx
```
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.
## Qual è il prossimo passo?
Esplora tutti i componenti disponibili
Scopri come usare i componenti in MDX