Recipe

A structured recipe layout designed to sit inline within article content. The header uses a large serif title with a description paragraph and a centered meta bar showing prep time and servings. Ingredients render in a warm gray callout box, and directions use numbered steps with kale-bordered circle indicators.

Recipes can be built manually with HTML, or pulled dynamically from the recipes blog using a data-handle attribute (API-driven, coming soon).

Manual Syntax

<div data-nama="recipe" class="nama-recipe">
  <div data-nama="recipe-header" class="nama-recipe-header">
    <div data-nama="recipe-title" class="nama-recipe-title">Berry Ginger Sorbet</div>
    <p>A vibrant blend of mixed berries with a subtle kick
    of fresh ginger.</p>
    <div data-nama="recipe-meta" class="nama-recipe-meta">
      <span>20 min</span>
      <span>3 Servings</span>
    </div>
  </div>
  <div data-nama="recipe-ingredients" class="nama-recipe-ingredients">
    <div data-nama="recipe-section-title" class="nama-recipe-section-title">Ingredients</div>
    <ul>
      <li>4 ounces fresh ginger, peeled</li>
      <li>2 cups Greek yogurt, frozen in ice cube trays</li>
      <li>1 cup frozen strawberries</li>
    </ul>
  </div>
  <div data-nama="recipe-directions" class="nama-recipe-directions">
    <div data-nama="recipe-section-title" class="nama-recipe-section-title">Directions</div>
    <ol>
      <li>Cut the ginger into chunks and feed through the juicer.</li>
      <li>Mix together yogurt and syrup. Freeze overnight.</li>
      <li>Switch out the strainer for the Sorbet Attachment.</li>
    </ol>
  </div>
</div>

2-Column Layout

Add data-layout="2-col" + class="nama-layout-2-col" and wrap ingredients + directions in a .recipe-body div. Ingredients and directions sit side by side on desktop, stacking on mobile.

<div data-nama="recipe" class="nama-recipe nama-layout-2-col" data-layout="2-col">
  <div data-nama="recipe-header" class="nama-recipe-header">...</div>
  <div class="recipe-body">
    <div data-nama="recipe-ingredients" class="nama-recipe-ingredients">...</div>
    <div data-nama="recipe-directions" class="nama-recipe-directions">...</div>
  </div>
</div>

In 2-col mode: no warm gray background on ingredients, both columns are white, section titles are 18px/400, direction circles are 32px (matching 1-col mobile size). On mobile, reverts to 1-col with full-size circles.

---

API-Driven

<div data-nama="recipe" class="nama-recipe" data-handle="berry-lemon-aid">
  <a class="nama-handle" href="/blogs/recipes/berry-lemon-aid">Berry Lemon Aid</a>
</div>

When a handle is present, the Liquid template looks up the recipe article from the recipes blog by handle, reads custom.ingredient_lines and custom.recipe_direction_steps metafields, and renders the full recipe HTML server-side. No JavaScript needed.

The handle is read from data-handle first, then falls back to the .nama-handle link’s href (last path segment). The link is a durable fallback — Shopify’s visual editor strips data-* attributes but leaves links intact. The link is hidden on the live site via CSS.

Always include the fallback link

If an editor opens the article in visual mode, data-handle will be stripped and the recipe won’t render. The .nama-handle link is the safety net — always include it.

Structure

The recipe has three required sections, each with its own data-nama wrapper:

Header (recipe-header)

Element	Style
Title (recipe-title)	Serif, 48px desktop (clamps down to 32px mobile), 300 weight, -0.48px letter-spacing, charcoal.
Description (<p>)	Body-md, 16px, 300 weight, 1.6 line-height.
Meta bar (recipe-meta)	Centered row with #f2f2f2 top/bottom borders. 14px, 400 weight, light-charcoal. Items separated by a 1px vertical line.

Meta bar uses spans, not a single string

Each meta item must be a separate <span>. The vertical divider line is generated automatically between spans via CSS ::before. Don’t use · or | characters — just two <span> elements.

Ingredients (recipe-ingredients)

Element	Style
Background	Warm gray (#F9F9F7), 24px padding.
Section title	Sans-serif, 18px, 400 weight, 1.04 line-height.
List	Unordered, custom 3px dot bullets, 8px gap between items.

Directions (recipe-directions)

Element	Style
Section title	Sans-serif, 32px desktop / 24px mobile, 300 weight, 1.06 line-height. 32px bottom margin.
Step numbers	54px circle (44px mobile), rgba(40,114,79,0.2) border (kale at 20%), 24px number inside, 300 weight.
Step text	Body-md, 16px, 300 weight, 1.6 line-height. Sits to the right of the circle with 24px gap.
Step spacing	24px between steps.

Tips

• The description paragraph in the header is optional — omit it for a tighter layout with just title + meta.
• Ingredients use the same warm gray callout style as the Callout Columns block. Keep them consistent.
• Direction steps can contain multiple paragraphs — the circle aligns to the top of the first paragraph.
• For a recipe that needs a “What you’ll need” equipment list alongside ingredients, use the Callout Columns block instead of the ingredients section, or place a callout-columns block before the recipe.