This rune is part of @refrakt-md/learning. Install with npm install @refrakt-md/learning and add "@refrakt-md/learning" to the packages 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">
<meta content="PT15M" data-field="prep-time" property="prepTime">
<meta content="PT30M" data-field="cook-time" property="cookTime">
<meta content="4" data-field="servings" property="recipeYield">
<meta content="easy" data-field="difficulty">
<meta content="stacked" data-field="layout">
<div data-name="content">
<header>
<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>
</header>
<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>
</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--stacked rf-recipe--easy" data-layout="stacked" data-prep-time="PT15M" data-cook-time="PT30M" data-servings="4" data-difficulty="easy" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="recipe" data-density="full" data-media-position="top" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
<div data-name="meta" class="rf-recipe__meta" data-section="header">
<span data-name="meta-item" data-meta-type="temporal" data-meta-rank="primary" class="rf-recipe__meta-item">
<span data-meta-label="">Prep:</span>
<span data-meta-value="">15m</span>
</span>
<span data-name="meta-item" data-meta-type="temporal" data-meta-rank="primary" class="rf-recipe__meta-item">
<span data-meta-label="">Cook:</span>
<span data-meta-value="">30m</span>
</span>
<span data-name="meta-item" data-meta-type="quantity" data-meta-rank="primary" class="rf-recipe__meta-item">
<span data-meta-label="">Serves:</span>
<span data-meta-value="">4</span>
</span>
<span data-name="badge" data-meta-type="category" data-meta-rank="primary" data-meta-sentiment="positive" class="rf-recipe__badge">easy</span>
</div>
<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>
<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>
</article>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
prepTime | string | — | Prep time in ISO 8601 duration (e.g. "PT15M") |
cookTime | string | — | Cook time in ISO 8601 duration |
servings | number | — | Number of servings |
difficulty | string | medium | Difficulty level: easy, medium, or hard |
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.
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |