Ingredient Grid

A JS-enhanced block that displays ingredients or features in a responsive two-column grid. Each card has an image, title, and description.

Syntax

<div data-nama="ingredient-grid" class="nama-ingredient-grid">
  <div data-nama="ingredient" class="nama-ingredient" data-image="https://cdn.shopify.com/...">
    <div data-nama="ingredient-title" class="nama-ingredient-title">Almonds</div>
    <div data-nama="ingredient-desc" class="nama-ingredient-desc">Description text here.</div>
  </div>
  <!-- repeat for each ingredient -->
</div>

How It Works

This is a JS-enhanced block. The data-image attribute on each ingredient card is read by JavaScript, which creates an <img> element and injects it. The card starts hidden and fades in once the image is loaded.

Settings

Attribute	On	Description
data-image	ingredient	URL for the card image

Notes

• Images are 109×115px, cropped via object-fit: cover.
• Grid is 1-column on mobile, 2-column on desktop.
• Always include class="nama-ingredient-grid" (and nama-ingredient on each card) for visual editor durability.