# HTML dei modelli

> Modifica un modello come HTML, porta HTML da altrove, e gli attributi data che segnano campi, blocchi ed elementi.

## Qualsiasi HTML è un modello

Qualsiasi HTML e CSS è un modello: stili in linea, qualsiasi struttura, immagini e caratteri remoti. Un salvataggio toglie solo ciò che potrebbe eseguire codice, come script, pagine incorporate, moduli, gestori di eventi e link javascript:, e dice cosa ha tolto.

## Modifica l’HTML

- **Codice**, accanto a **Design** nella barra in alto, mostra il modello come HTML accanto a un’anteprima dal vivo; ciò che scrivi si salva man mano.
- **Copia HTML** nel menu **⋯** copia l’intero modello: modificalo dove vuoi, anche con un altro strumento, e incollalo di nuovo in **Codice**.
- **HTML** su un elemento selezionato modifica solo quell’elemento.
- L’assistente della dashboard e i client MCP leggono e scrivono lo stesso HTML.

## Attributi

L’editor dispone ciò che riconosce, e l’agente compila ciò che è segnato con gli attributi `data-*` qui sotto. I nomi usano lettere minuscole, cifre e trattini bassi, iniziano con una lettera, massimo 40 caratteri.

| Attributo | Uso |
| --- | --- |
| `data-slot`, `data-type` | Un campo, unico nel suo blocco; `text` (predefinito), `markdown`, `number`, `money`, `date`, `enum`, `url` (su un `<a>`: ne riempie il link), `rows`. |
| `data-row`, `data-field` | Dentro `rows`: il primo `data-row` si ripete per ogni voce, gli altri sono esempi; `data-field` contiene ogni valore. |
| `data-if` | Una parte facoltativa. |
| `data-layout` | Un blocco, figlio diretto del body; `data-min`, `data-max`, `data-position` (`first`, `last`). |
| `data-required`, `data-default`, `data-hint` | Valore obbligatorio, valore di ripiego, l’istruzione per l’agente. |
| `data-max-chars`, `data-max-words`, `data-min`, `data-max` | Lunghezza del testo; limiti dei numeri; dimensione degli elenchi. |
| `data-options`, `data-currency`, `data-format` | Scelte (separate da barra verticale); codice ISO 4217; `integer`, `decimal`, `percent` oppure `short`, `medium`, `long`. |
| `data-sample` | Numero, importo o data di esempio; `false` nasconde una parte `data-if`. |
| `data-frame` | Un elemento di una pagina o di un blocco: `text` (predefinito), `image`, `shape`, `table`, `columns` (con `data-columns` 2 o 3 contenitori), `spacer`, `rule`. Solo le colonne si annidano. |
| `data-canvas` | Non in un’email. Una pagina fissa, su un blocco o sul body senza blocchi. I suoi elementi si posizionano con `left`, `top`, `width`, `height`, `z-index` nello `style` in linea (px per le slide, mm per l’A4), accanto a qualsiasi altro CSS. |
| `data-width`, `data-align`, `data-text-align`, `data-size` | Pagine a scorrimento: `full`, `two-thirds`, `half`, `third`; `left`, `center`, `right`; testo da `s` a `xxl`. |
| Immagine e forma | Un `<img>` con data URL e `data-fit` (`cover`, `contain`); `data-shape` (`rect`, `ellipse`, `triangle`, `line`), `data-color` (`accent`, `ink`, `muted`, `paper`, `soft`, `none`) o `background-color` esadecimale in linea; spazio `data-height` (`s`, `m`, `l`). |
| Stili dei riquadri | `data-bg` su testo, tabella, colonne (`accent`, `ink`, `muted`, `paper`, `soft`); `data-border` (`thin`, `medium`, `thick`) e `data-border-color` (`accent`, `ink`, `muted`, `rule`); `data-radius` (`0`, `sm`, `md`, `full`). |
| Immagine da scegliere | Un `<img>` senza `src`, come `<img class="logo" alt="" hidden>` di un modello di partenza: si sceglie sulla pagina nell’editor; finché manca non si stampa nulla. |
| Intestazione e piè di pagina | `<meta name="botchi-header">` o `botchi-footer` nella head: `content` è la riga (`{page}` e `{pages}` diventano il numero di pagina e il totale), `data-align` è `left`, `center` o `right`. Non in un’email. |

> **Regola** — Script, iframe, form, gestori di eventi e link javascript: vengono tolti a ogni salvataggio. I campi compilano solo il contenuto degli elementi (un campo link ne compila l’indirizzo), mai altri attributi o CSS.

## Correlati

- [Modelli di documento](/it/docs/templates)