---
title: Riquadro
description: >-
  Frame racchiude immagini e demo in un contenitore bordato con didascalie opzionali, per mantenere uniformi gli elementi visivi della documentazione.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Frame racchiude immagini e demo in un contenitore bordato con didascalie opzionali.

Gli screenshot mostrano l'interfaccia in inglese.

Usa Frame per:
- Dare a screenshot e immagini dell'interfaccia un aspetto rifinito
- Aggiungere didascalie per spiegare ciò che vedono i lettori
- Distinguere l'output delle demo dal contenuto normale
- Creare uniformità visiva nella documentazione

## Utilizzo

```mdx
<Frame caption="Architecture diagram">
  ![Diagram](/images/city-skyline.jpg)
</Frame>
```

## Frame di base

<Frame>
  ![Panorama urbano](/images/city-skyline.webp)
</Frame>

```mdx
<Frame>
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## Con didascalia

Aggiungi una didascalia sotto il riquadro:

<Frame caption="New York City at dusk">
  ![Panorama urbano](/images/city-skyline.webp)
</Frame>

```mdx
<Frame caption="New York City at dusk">
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## Riquadrare altri contenuti

Frame funziona con qualsiasi contenuto, non solo con le immagini:

<Frame caption="Example code output">
```
✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production
```
</Frame>

## Quando NON usare Frame

- **Immagini decorative inline** - Le immagini Markdown normali sono adatte per le illustrazioni
- **Icone o elementi grafici piccoli** - Frame aggiunge un peso visivo non necessario
- **Immagini integrate nel testo** - Frame crea una separazione visiva; usalo per elementi visivi autonomi

## Buone pratiche

- **Mantieni le didascalie concise** - Una frase che spiega ciò che vede il lettore
- **Usalo in modo coerente** - Se aggiungi un riquadro a uno screenshot, aggiungilo a tutti gli screenshot per garantire uniformità visiva
- **Non usare Frame eccessivamente** - Riserva i riquadri agli elementi visivi importanti, non a ogni immagine della pagina

## Proprietà

<ParamField name="caption" type="string">
  Testo opzionale sotto il riquadro.
</ParamField>

## Passaggi successivi

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/it/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/it/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>