Recipe Grid

A simple grid of linked cards — each with an image and a title — for showcasing recipe collections inline in article body content. Cards link directly to recipe pages.

Syntax

<div data-nama="recipe-grid" class="nama-recipe-grid">
  <a href="/blogs/recipes/orange-jewel" class="nama-recipe-grid-item">
    <img src="https://cdn.shopify.com/..." alt="Orange Jewel">
    <span>Orange Jewel</span>
  </a>
  <a href="/blogs/recipes/beet-sangria" class="nama-recipe-grid-item">
    <img src="https://cdn.shopify.com/..." alt="Beet Sangria">
    <span>Beet Sangria</span>
  </a>
</div>

Column Variants

The grid defaults to 2 columns. Use data-columns for 3 or 4 on desktop (always 2 on mobile).

<!-- 3 columns on desktop -->
<div data-nama="recipe-grid" class="nama-recipe-grid nama-columns-3" data-columns="3">
  ...
</div>

<!-- 4 columns on desktop -->
<div data-nama="recipe-grid" class="nama-recipe-grid nama-columns-4" data-columns="4">
  ...
</div>

Always add the mirror class (e.g. nama-columns-3) alongside the data attribute for visual editor durability.

Settings

Attribute	On	Values	Default	Description
data-columns	Container	2, 3, 4	2	Number of columns on desktop

Specs

Element	Style
Grid gap	16px mobile, 24px desktop
Image	Full width, auto height, 4px border-radius
Title	Sans-serif, body-sm, 400 weight
Hover	Title turns kale green
Mobile	Always 2 columns

Tips

• Each card is an <a> tag wrapping both the image and title — the entire card is clickable.
• Use <span> for the title text (not <h3>), since these are navigation links not section headings.
• The class="nama-recipe-grid-item" on each card is required — this is what survives the visual editor.
• Pair with an <h2> or <h3> heading above the grid to label the category (e.g. “Seasonal Juices”, “Mocktails”).
• Works great for recipe roundup articles, seasonal collections, and holiday guides.