note
This rune is part of @refrakt-md/learning. Install with npm install @refrakt-md/learning and add "@refrakt-md/learning" to the plugins array in your refrakt.config.json.
Recipe
Structured recipe content. Unordered lists become ingredients, ordered lists become steps, and blockquotes become chef's tips.
Basic usage
A complete recipe with ingredients, instructions, and a tip.
{% recipe prepTime="PT15M" cookTime="PT30M" servings=4 difficulty="easy" %}
# Classic Pasta Carbonara
A rich and creamy Italian pasta dish.
- 400g spaghetti
- 200g pancetta
- 4 egg yolks
- 100g Pecorino Romano
- Black pepper to taste
1. Cook pasta in salted boiling water until al dente
2. Fry pancetta in a large pan until crispy
3. Whisk egg yolks with grated cheese and pepper
4. Toss hot pasta with pancetta, then stir in egg mixture off the heat
> The residual heat from the pasta cooks the eggs — never add eggs directly to a hot pan or they will scramble.
{% /recipe %}<article data-field="content-section" data-rune="recipe" typeof="Recipe" data-rune-fields="{"prepTime":"PT15M","cookTime":"PT30M","servings":"4","difficulty":"easy","media-position":"top"}">
<meta content="PT15M" property="prepTime">
<meta content="PT30M" property="cookTime">
<meta content="4" property="recipeYield">
<h1 id="classic-pasta-carbonara" data-name="headline" property="name">Classic Pasta Carbonara</h1>
<p data-name="blurb" property="description">A rich and creamy Italian pasta dish.</p>
<ul data-name="ingredients">
<li data-name="ingredient" property="recipeIngredient">400g spaghetti</li>
<li data-name="ingredient" property="recipeIngredient">200g pancetta</li>
<li data-name="ingredient" property="recipeIngredient">4 egg yolks</li>
<li data-name="ingredient" property="recipeIngredient">100g Pecorino Romano</li>
<li data-name="ingredient" property="recipeIngredient">Black pepper to taste</li>
</ul>
<ol data-name="steps">
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Cook pasta in salted boiling water until al dente</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Fry pancetta in a large pan until crispy</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Whisk egg yolks with grated cheese and pepper</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Toss hot pasta with pancetta, then stir in egg mixture off the heat</p>
</li>
</ol>
<div data-name="tips">
<blockquote>
<p>The residual heat from the pasta cooks the eggs — never add eggs directly to a hot pan or they will scramble.</p>
</blockquote>
</div>
</article>Classic Pasta Carbonara
A rich and creamy Italian pasta dish.
- 400g spaghetti
- 200g pancetta
- 4 egg yolks
- 100g Pecorino Romano
- Black pepper to taste
Cook pasta in salted boiling water until al dente
Fry pancetta in a large pan until crispy
Whisk egg yolks with grated cheese and pepper
Toss hot pasta with pancetta, then stir in egg mixture off the heat
The residual heat from the pasta cooks the eggs — never add eggs directly to a hot pan or they will scramble.
<article data-field="content-section" typeof="Recipe" class="rf-recipe rf-recipe--easy" data-media-position="top" data-prep-time="PT15M" data-cook-time="PT30M" data-servings="4" data-difficulty="easy" data-elevation="flat" data-rune="recipe" data-density="full">
<div data-name="content" class="rf-recipe__content">
<header data-name="preamble" class="rf-recipe__preamble" data-section="preamble">
<h1 id="classic-pasta-carbonara" data-name="headline" property="name" class="rf-recipe__headline" data-section="title">Classic Pasta Carbonara</h1>
<p data-name="blurb" property="description" class="rf-recipe__blurb" data-section="description">A rich and creamy Italian pasta dish.</p>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-recipe__metadata">
<div data-name="row" data-field="prepTime" class="rf-recipe__row">
<dt data-meta-label="">Prep</dt>
<dd data-meta-type="temporal">15m</dd>
</div>
<div data-name="row" data-field="cookTime" class="rf-recipe__row">
<dt data-meta-label="">Cook</dt>
<dd data-meta-type="temporal">30m</dd>
</div>
<div data-name="row" data-field="servings" class="rf-recipe__row">
<dt data-meta-label="">Serves</dt>
<dd data-meta-type="quantity">4</dd>
</div>
<div data-name="row" data-field="difficulty" class="rf-recipe__row">
<dt data-meta-label="">Difficulty</dt>
<dd>
<span class="rf-badge" data-meta-type="category" data-meta-sentiment="positive">easy</span>
</dd>
</div>
</dl>
<ul data-name="ingredients" class="rf-recipe__ingredients">
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">400g spaghetti</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">200g pancetta</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">4 egg yolks</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">100g Pecorino Romano</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">Black pepper to taste</li>
</ul>
<ol data-name="steps" class="rf-recipe__steps" data-sequence="numbered">
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Cook pasta in salted boiling water until al dente</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Fry pancetta in a large pan until crispy</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Whisk egg yolks with grated cheese and pepper</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Toss hot pasta with pancetta, then stir in egg mixture off the heat</p>
</li>
</ol>
<div data-name="tips" class="rf-recipe__tips">
<blockquote>
<p>The residual heat from the pasta cooks the eggs — never add eggs directly to a hot pan or they will scramble.</p>
</blockquote>
</div>
</div>
<meta content="PT15M" property="prepTime" />
<meta content="PT30M" property="cookTime" />
<meta content="4" property="recipeYield" />
</article>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
prepTime | string | — | Time needed for preparation before cooking (e.g. "15 min") |
cookTime | string | — | Active cooking or baking time (e.g. "45 min") |
servings | number | — | Number of portions the recipe yields |
difficulty | "easy" | "medium" | "hard" | — | Skill level: easy, medium, or hard |
content-place | string | — | Cover overlay anchor: "<block> <inline>" (e.g. "end start") or "auto" |
Inherited from the split layout preset
| Attribute | Type | Required | Description |
|---|---|---|---|
media-position | "top" | "bottom" | "start" | "end" | "cover" | — | Where the media zone sits relative to the content: above (top), below (bottom), or beside (start/end) |
media-ratio | "1/3" | "2/5" | "1/2" | "3/5" | "2/3" | — | Media zone’s share of the row width when media is beside content (start/end) |
valign | "top" | "center" | "bottom" | "stretch" | — | Cross-axis alignment when media is beside content (start/end); applies to the shorter zone |
collapse | "sm" | "md" | "lg" | "never" | — | Breakpoint at which side-by-side layouts collapse to a single stacked column |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
frame
Surface chrome (SPEC-086): a named preset from the theme registry with inline `frame-*` overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
frame | string | — | Named frame preset presenting this block's media surface |
frame-anchor | string | — | Crop focal point when the guest is cut (object-position) |
frame-aspect | string | — | Aspect ratio of the framed media, e.g. "16/9" |
frame-displace | "top" | "bottom" | "end" | "bottom-end" | "top-end" | — | Edge/corner the framed guest moves toward |
frame-displace-mode | "peek" | "bleed" | — | How displacement renders: `peek` (default) translates the guest visually inside its frame target; `bleed` uses negative margin on the media zone so following layout pulls up — extends past a section like a hero without leaving a gap above |
frame-offset | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | — | Displacement distance (non-linear named scale: sm…xl ride the block-spacing tokens, 2xl/3xl/4xl step up to section-spacing for bleed-mode displacements that clear a section edge) |
frame-overflow | "clip" | "bleed" | — | How the frame handles a guest whose content is wider than it: `clip` (default) keeps it inside the rounded frame; `bleed` runs an overflowing guest out to the layout edge on a narrow viewport so it reads as cropped by the screen (a bleed host only — hero/feature) |
frame-oversize | string | — | How far the guest exceeds its slot (scale factor) |
frame-place | string | — | Guest-box alignment in the slot (e.g. "left top") |
frame-shadow | "none" | "sm" | "md" | "lg" | — | Silhouette drop-shadow strength for the framed media |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
prominence
Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
prominence | "quiet" | "normal" | "prominent" | "display" | — | Section-header emphasis (only on page-section-header family runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
Section header
Recipe supports an optional eyebrow, headline, and blurb above the section above ingredients and method. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.
Layout attributes
The body splits on --- into media → content → footer zones (media-first in source). media-position controls visual placement independently of source order.
| Attribute | Type | Default | Description |
|---|---|---|---|
media-position | string | top | Where the media sits: top, bottom, start (left), end (right), or cover (poster header — see below) |
media-ratio | string | — | Media's share of the row when beside content (start/end): 1/3, 2/5, 1/2, 3/5, 2/3 |
valign | string | — | Cross-axis alignment when media is beside content: top, center, bottom, stretch |
collapse | string | — | Breakpoint at which beside layouts collapse to a stack: sm, md, lg, never |
content-place | string | auto | Cover only. Where the overlaid header anchors: <block> <inline> (each start/center/end), or auto |
Cover mode
media-position="cover" turns the recipe into a poster: the title block (eyebrow, headline, blurb) overlays the media as a header, and the ingredients, steps, and tips flow below on the page palette. Recipe uses header scope — only the preamble sits on the image, never the long body — so it's the same one-attribute switch as on card, scoped to the part that belongs on the photo.
{% recipe prepTime="PT5M" servings=1 difficulty="easy" media-position="cover" scrim-type="frost" scrim-blur="md" %}
---
A cocktail classic
## Tequila Sunrise
A layered showstopper that transitions from deep orange to golden yellow — like watching the sun come up in a glass.
- 60ml tequila
- 120ml fresh orange juice
- 15ml grenadine
- Orange slice and cherry for garnish
1. Fill a tall glass with ice and pour in the tequila and orange juice. Stir gently.
2. Slowly pour grenadine over the back of a spoon so it sinks to the bottom.
3. Let the layers settle, then garnish with an orange slice and a cherry.
{% /recipe %}<article data-field="content-section" data-rune="recipe" typeof="Recipe" data-rune-fields="{"prepTime":"PT5M","cookTime":"","servings":"1","difficulty":"easy","media-position":"cover"}">
<meta content="PT5M" property="prepTime">
<meta content="1" property="recipeYield">
<div data-name="media">
<img src="https://assets.refrakt.md/tequila-sunrise.png" alt="A tequila sunrise cocktail" property="image">
</div>
<p data-name="eyebrow">A cocktail classic</p>
<h2 id="tequila-sunrise" data-name="headline" property="name">Tequila Sunrise</h2>
<p data-name="blurb" property="description">A layered showstopper that transitions from deep orange to golden yellow — like watching the sun come up in a glass.</p>
<ul data-name="ingredients">
<li data-name="ingredient" property="recipeIngredient">60ml tequila</li>
<li data-name="ingredient" property="recipeIngredient">120ml fresh orange juice</li>
<li data-name="ingredient" property="recipeIngredient">15ml grenadine</li>
<li data-name="ingredient" property="recipeIngredient">Orange slice and cherry for garnish</li>
</ul>
<ol data-name="steps">
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Fill a tall glass with ice and pour in the tequila and orange juice. Stir gently.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Slowly pour grenadine over the back of a spoon so it sinks to the bottom.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Let the layers settle, then garnish with an orange slice and a cherry.</p>
</li>
</ol>
<meta data-field="scrim-type" content="frost">
<meta data-field="scrim-blur" content="md">
</article>
A cocktail classic
Tequila Sunrise
A layered showstopper that transitions from deep orange to golden yellow — like watching the sun come up in a glass.
- 60ml tequila
- 120ml fresh orange juice
- 15ml grenadine
- Orange slice and cherry for garnish
Fill a tall glass with ice and pour in the tequila and orange juice. Stir gently.
Slowly pour grenadine over the back of a spoon so it sinks to the bottom.
Let the layers settle, then garnish with an orange slice and a cherry.
<article data-field="content-section" typeof="Recipe" class="rf-recipe rf-recipe--easy rf-recipe--cover" data-media-position="cover" data-prep-time="PT5M" data-cook-time="" data-servings="1" data-difficulty="easy" data-elevation="flat" data-scrim-type="frost" data-scrim-blur="md" data-rune="recipe" data-density="full" data-cover-scope="header">
<div data-name="cover-band" data-color-scheme="dark" class="rf-recipe__cover-band">
<div data-name="media" class="rf-recipe__media" data-section="media" data-media="cover" data-guest-fit="clip" data-guest-posture="presentational">
<img src="https://assets.refrakt.md/tequila-sunrise.png" alt="A tequila sunrise cocktail" property="image" />
</div>
<header data-name="preamble" class="rf-recipe__preamble" data-section="preamble">
<p data-name="eyebrow" class="rf-recipe__eyebrow">A cocktail classic</p>
<h2 id="tequila-sunrise" data-name="headline" property="name" class="rf-recipe__headline" data-section="title">Tequila Sunrise</h2>
<p data-name="blurb" property="description" class="rf-recipe__blurb" data-section="description">A layered showstopper that transitions from deep orange to golden yellow — like watching the sun come up in a glass.</p>
</header>
</div>
<div data-name="content" class="rf-recipe__content">
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-recipe__metadata">
<div data-name="row" data-field="prepTime" class="rf-recipe__row">
<dt data-meta-label="">Prep</dt>
<dd data-meta-type="temporal">5m</dd>
</div>
<div data-name="row" data-field="servings" class="rf-recipe__row">
<dt data-meta-label="">Serves</dt>
<dd data-meta-type="quantity">1</dd>
</div>
<div data-name="row" data-field="difficulty" class="rf-recipe__row">
<dt data-meta-label="">Difficulty</dt>
<dd>
<span class="rf-badge" data-meta-type="category" data-meta-sentiment="positive">easy</span>
</dd>
</div>
</dl>
<ul data-name="ingredients" class="rf-recipe__ingredients">
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">60ml tequila</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">120ml fresh orange juice</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">15ml grenadine</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">Orange slice and cherry for garnish</li>
</ul>
<ol data-name="steps" class="rf-recipe__steps" data-sequence="numbered">
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Fill a tall glass with ice and pour in the tequila and orange juice. Stir gently.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Slowly pour grenadine over the back of a spoon so it sinks to the bottom.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Let the layers settle, then garnish with an orange slice and a cherry.</p>
</li>
</ol>
</div>
<meta content="PT5M" property="prepTime" />
<meta content="1" property="recipeYield" />
</article>The cover scrim, content-place anchor, and scrim-type="frost" work exactly as on card — here the frosted band reads behind the title while the metadata and method below stay on the normal surface. Only the overlaid header flips to a light foreground; the body keeps the page palette.
Card vs hero
A recipe is a bordered card by default. The same recipe becomes a full-bleed hero by composing the three surface axes — elevation="flush" drops the card chrome, width="full" takes it edge-to-edge, and prominence="display" scales the title up — with no rune fork:
{% recipe prepTime="PT5M" servings=1 difficulty="easy" elevation="flush" width="full" prominence="display" %}
---
A cocktail classic
## Tequila Sunrise
A layered showstopper that runs from deep orange to golden yellow.
- 60ml tequila
- 120ml fresh orange juice
- 15ml grenadine
1. Fill a tall glass with ice; pour in tequila and orange juice.
2. Pour grenadine over the back of a spoon so it sinks.
{% /recipe %}<article data-field="content-section" data-rune="recipe" typeof="Recipe" data-rune-fields="{"prepTime":"PT5M","cookTime":"","servings":"1","difficulty":"easy","media-position":"top"}" width="full" elevation="flush" prominence="display">
<meta content="PT5M" property="prepTime">
<meta content="1" property="recipeYield">
<div data-name="media">
<img src="https://assets.refrakt.md/tequila-sunrise.png" alt="A tequila sunrise cocktail" property="image">
</div>
<p data-name="eyebrow">A cocktail classic</p>
<h2 id="tequila-sunrise" data-name="headline" property="name">Tequila Sunrise</h2>
<p data-name="blurb" property="description">A layered showstopper that runs from deep orange to golden yellow.</p>
<ul data-name="ingredients">
<li data-name="ingredient" property="recipeIngredient">60ml tequila</li>
<li data-name="ingredient" property="recipeIngredient">120ml fresh orange juice</li>
<li data-name="ingredient" property="recipeIngredient">15ml grenadine</li>
</ul>
<ol data-name="steps">
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Fill a tall glass with ice; pour in tequila and orange juice.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions">
<p property="text">Pour grenadine over the back of a spoon so it sinks.</p>
</li>
</ol>
</article>A cocktail classic
Tequila Sunrise
A layered showstopper that runs from deep orange to golden yellow.
- 60ml tequila
- 120ml fresh orange juice
- 15ml grenadine
Fill a tall glass with ice; pour in tequila and orange juice.
Pour grenadine over the back of a spoon so it sinks.
<article data-field="content-section" typeof="Recipe" class="rf-recipe rf-recipe--easy rf-recipe--full" data-media-position="top" data-prep-time="PT5M" data-cook-time="" data-servings="1" data-difficulty="easy" data-width="full" data-elevation="flush" data-prominence="display" data-rune="recipe" data-density="full">
<div data-name="media" class="rf-recipe__media" data-section="media" data-media="cover" data-guest-fit="clip">
<img src="https://assets.refrakt.md/tequila-sunrise.png" alt="A tequila sunrise cocktail" property="image" />
</div>
<div data-name="content" class="rf-recipe__content">
<header data-name="preamble" class="rf-recipe__preamble" data-section="preamble">
<p data-name="eyebrow" class="rf-recipe__eyebrow">A cocktail classic</p>
<h2 id="tequila-sunrise" data-name="headline" property="name" class="rf-recipe__headline" data-section="title">Tequila Sunrise</h2>
<p data-name="blurb" property="description" class="rf-recipe__blurb" data-section="description">A layered showstopper that runs from deep orange to golden yellow.</p>
</header>
<dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-recipe__metadata">
<div data-name="row" data-field="prepTime" class="rf-recipe__row">
<dt data-meta-label="">Prep</dt>
<dd data-meta-type="temporal">5m</dd>
</div>
<div data-name="row" data-field="servings" class="rf-recipe__row">
<dt data-meta-label="">Serves</dt>
<dd data-meta-type="quantity">1</dd>
</div>
<div data-name="row" data-field="difficulty" class="rf-recipe__row">
<dt data-meta-label="">Difficulty</dt>
<dd>
<span class="rf-badge" data-meta-type="category" data-meta-sentiment="positive">easy</span>
</dd>
</div>
</dl>
<ul data-name="ingredients" class="rf-recipe__ingredients">
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">60ml tequila</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">120ml fresh orange juice</li>
<li data-name="ingredient" property="recipeIngredient" class="rf-recipe__ingredient">15ml grenadine</li>
</ul>
<ol data-name="steps" class="rf-recipe__steps" data-sequence="numbered">
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Fill a tall glass with ice; pour in tequila and orange juice.</p>
</li>
<li data-name="step" typeof="HowToStep" property="recipeInstructions" class="rf-recipe__step">
<p property="text">Pour grenadine over the back of a spoon so it sinks.</p>
</li>
</ol>
</div>
<meta content="PT5M" property="prepTime" />
<meta content="1" property="recipeYield" />
</article>This differs from cover mode above: cover overlays the title on the image (a poster), while the hero stacks a display-size title above an edge-to-edge image. Both are one-line switches on the same content. See Surfaces → Card vs hero for the full axis reference.