This page shows every editorial component in action. Use it as a reference when writing a recipe or guide: find the block you need, copy the snippet, swap in your content.
The components are available automatically in every .mdx file under src/content/blog/{it,en,fr}/ and src/content/academy/{it,en,fr}/. No need to import them at the top of the file.
Figure with side text — ratio portrait
The image takes ~36% of the width, the text fills the rest. Suited to vertical photos.
Melt the sugar over medium heat in a non-stick pan. No water, no spoon: just sugar and heat. At first nothing seems to happen, then the edges start to liquefy.
It’s the most nerve-racking moment of the recipe, but it’s also where the golden rule is: don’t touch. The more you stir the caramel, the more you risk crystallizing it.
<Figure src="/images/demo/portrait.svg" side="right" ratio="portrait"
caption="Amber, not burnt.">
The paragraph that lives in the column next to it.
</Figure>
Figure with side text — ratio landscape
The image takes ~52% of the width. Suited to horizontal photos.
Pour the hot caramel into the mold, rotating it so it coats the bottom evenly. Work fast: it sets in seconds.
Meanwhile prep the water bath with hot water up to halfway up the mold.
<Figure src="/images/demo/landscape.svg" side="left" ratio="landscape"
caption="The covered mould, ready for the water bath.">
Paragraph next to the image.
</Figure>
Figure with side text — ratio square
In between: image ~44%, text ~56%.
Lay out on your work surface all the ingredients, already weighed and chopped. In the kitchen, mise en place is worth more than any advanced technique.
Standalone figure (no side text)
If you omit the children, the figure centers in the text column.
<Figure src="/images/demo/landscape.svg" caption="The finished dish." />
Pullquote
A large phrase pulled from the body text, with an orange accent on the side. Use it for the mantra-lines of a recipe.
You don’t stir the caramel, you watch it.
With attribution:
In the kitchen, haste burns everything.
— Nonna Pina
<Pullquote>You don't stir the caramel, you watch it.</Pullquote>
<Pullquote cite="Nonna Pina">In the kitchen, haste burns everything.</Pullquote>
2-column gallery
Grid of side-by-side images. On mobile it collapses to a single column.
<Gallery columns={2} items={[
{ src: "/images/demo/step1.svg", caption: "Step 1 · pour" },
{ src: "/images/demo/step2.svg", caption: "Step 2 · cover" },
]} />
3-column gallery
Wide gallery
The gallery can also break out of the text column with side="wide".
TwoColumn — ingredients next to method
Two-column text layout. Use two <div slot="left"> and <div slot="right">. Note the blank line after the opening <div> and before the closing </div> — MDX needs it to process the content as markdown.
Ingredients
- 200g (7.1 oz) sugar
- 4 large eggs
- 500ml (16.9 fl oz) whole milk
- 1 vanilla pod
- a pinch of salt
Method
- Make the caramel by melting the sugar over medium heat.
- Whisk the eggs with a pinch of salt, without aerating them.
- Warm the milk with the vanilla just up to a simmer.
- Pour the milk onto the eggs while stirring slowly.
- Strain the mixture and pour it into the caramelized mold.
- Bake in a water bath at 160°C (320°F) for 45–50 minutes.
<TwoColumn ratio="1/2">
<div slot="left">
### Ingredients
- 200g sugar
- 4 large eggs
</div>
<div slot="right">
### Method
1. Make the caramel…
</div>
</TwoColumn>
Aside — tip, warning, note variants
Side boxes for tricks, warnings and annotations.
<Aside variant="tip" title="Grandma's trick">
Tip body, processed as markdown.
</Aside>
Component summary
| Component | When to use it |
|---|---|
<Figure> | Single photo, optionally with side text in 2 columns |
<Gallery> | 2 or 3 photos side by side in a grid |
<Pullquote> | Large phrase pulled from the body |
<TwoColumn> | Two text blocks side by side (e.g. ingredients vs method) |
<Aside> | Box for tips, warnings or fun facts |
For real images, save them in public/images/<recipe-name>/ and reference them with src="/images/<recipe-name>/photo.jpg".
Comments & questions