Reference dei componenti editoriali

Questa pagina mostra ogni componente editoriale in azione. Usala come riferimento quando scrivi una ricetta o una guida: trova il blocco che ti serve, copia lo snippet, sostituisci i contenuti.

I componenti sono disponibili automaticamente in ogni file .mdx di src/content/blog/{it,en,fr}/ e src/content/academy/{it,en,fr}/. Non serve importarli in cima al file.

Figure con testo accanto — ratio portrait

L’immagine prende ~36% della larghezza, il testo riempie il resto. Adatto a foto in verticale.

Sciogli lo zucchero a fuoco medio in una padella antiaderente. Niente acqua, niente cucchiaio: solo zucchero e calore. All’inizio sembra non succeda nulla, poi i bordi cominciano a liquefarsi.

È il momento più ansiogeno della ricetta, ma è anche quello dove la regola d’oro è: non toccare. Più giri il caramello, più rischi che cristallizzi.

<Figure src="/images/demo/portrait.svg" side="right" ratio="portrait"
        caption="Ambrato, non bruciato.">

Il paragrafo che vive nella colonna accanto.

</Figure>

Figure con testo accanto — ratio landscape

L’immagine prende ~52% della larghezza. Adatto a foto in orizzontale.

Versa il caramello caldo nello stampo, ruotandolo perché copra il fondo in modo uniforme. Lavora veloce: solidifica in pochi secondi.

Prepara intanto il bagnomaria con acqua già calda fino a metà altezza dello stampo.

<Figure src="/images/demo/landscape.svg" side="left" ratio="landscape"
        caption="Lo stampo coperto, pronto per il bagnomaria.">

Paragrafo accanto all'immagine.

</Figure>

Figure con testo accanto — ratio square

Via di mezzo: immagine ~44%, testo ~56%.

Disponi sul piano di lavoro tutti gli ingredienti già pesati e tagliati. In cucina la mise en place vale più di qualsiasi tecnica avanzata.

Figure standalone (senza testo accanto)

Se ometti i children, la figure si centra nella colonna testo.

<Figure src="/images/demo/landscape.svg" caption="Il piatto finito." />

Ingredienti con foto — 50/50

IngredientsPhoto divide lo spazio disponibile in due colonne uguali, sottraendo prima lo spazio tra le colonne. La foto resta centrata rispetto alla lista, mantiene le sue proporzioni e non ha didascalia. Su mobile passa sotto gli ingredienti.

Lascia il titolo della sezione fuori dal componente, come nel template delle nuove ricette: il separatore resta sopra entrambe le colonne. Scrivi in grassetto solo i nomi degli ingredienti, che useranno il verde del brand.

• Melanzane: 600g
• Polpa di pomodoro: 200g
• Mozzarella: 125g
• Basilico fresco: 2 o 3 foglioline
• Olio extravergine di oliva: a filo
• Sale: 1 pizzico
• Pepe: 2 giri di macina

## Ingredienti

<IngredientsPhoto src="/images/ricette/pizzette-melanzane.webp"
                  alt="Pizzette di melanzane al forno">

- **Melanzane:** 600g
- **Polpa di pomodoro:** 200g
- **Mozzarella:** 125g

</IngredientsPhoto>

I campi width e height sono facoltativi: puoi indicarli quando conosci le dimensioni originali della foto.

Pullquote

Frase grande estratta dal testo, con accento arancione laterale. Usala per le frasi-mantra di una ricetta.

Il caramello non si mescola, si guarda.

Con attribuzione:

In cucina la fretta brucia tutto.

— Nonna Pina

<Pullquote>Il caramello non si mescola, si guarda.</Pullquote>

<Pullquote cite="Nonna Pina">In cucina la fretta brucia tutto.</Pullquote>

Gallery a 2 colonne

Griglia di immagini affiancate. Su mobile collassa a una colonna.

<Gallery columns={2} items={[
  { src: "/images/demo/step1.svg", caption: "Step 1 · versare" },
  { src: "/images/demo/step2.svg", caption: "Step 2 · coprire" },
]} />

Gallery a 3 colonne

Gallery wide

Anche la galleria può sforare la colonna testo con side="wide".

TwoColumn — ingredienti accanto al procedimento

Layout a due colonne testuali. Usa due <div slot="left"> e <div slot="right">. Nota la riga vuota dopo il <div> di apertura e prima del </div> di chiusura — serve a MDX per processare il contenuto come markdown.

<TwoColumn ratio="1/2">
  <div slot="left">

  ### Ingredienti
  - 200g zucchero
  - 4 uova grandi

  </div>
  <div slot="right">

  ### Procedimento
  1. Prepara il caramello…

  </div>
</TwoColumn>

Aside — varianti tip, warning, nota

Box laterali per trucchi, avvertenze e annotazioni.

<Aside variant="tip" title="Trucco della nonna">

Testo della tip, processato come markdown.

</Aside>

Riassunto dei componenti

Per le immagini reali, salvale in public/images/<nome-ricetta>/ e referenziale con src="/images/<nome-ricetta>/foto.jpg".