note

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>
Prep:15mCook:30mServes:4easy

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.

<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

AttributeTypeDefaultDescription
prepTimestringPrep time in ISO 8601 duration (e.g. "PT15M")
cookTimestringCook time in ISO 8601 duration
servingsnumberNumber of servings
difficultystringmediumDifficulty 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.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstringVertical spacing: flush, tight, default, loose, or breathe
insetstringHorizontal padding: flush, tight, default, loose, or breathe
tintstringNamed colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstringNamed background preset from theme configuration