Ingredient List

A serif title followed by ingredient name/description pairs. No images — use the Ingredient Grid block if you need images alongside each item.

1-Column

<div data-nama="ingredient-list" class="nama-ingredient-list">
  <div data-nama="ingredient-list-title" class="nama-ingredient-list-title">Ingredients</div>
  <div data-nama="ingredient-list-items" class="nama-ingredient-list-items">
    <div data-nama="ingredient-list-item" class="nama-ingredient-list-item">
      <div data-nama="ingredient-list-name" class="nama-ingredient-list-name">Almonds</div>
      <p>create a clean, everyday milk.</p>
    </div>
    <div data-nama="ingredient-list-item" class="nama-ingredient-list-item">
      <div data-nama="ingredient-list-name" class="nama-ingredient-list-name">Cashews</div>
      <p>turn velvety and naturally rich.</p>
    </div>
  </div>
</div>

2-Column

Add data-layout="2-col" + class="nama-layout-2-col". Items flow into a two-column grid on desktop, stacking on mobile.

<div data-nama="ingredient-list" class="nama-ingredient-list nama-layout-2-col" data-layout="2-col">
  ...same inner structure...
</div>

Element	Style
Title	Serif, 48px desktop (clamps to 32px mobile), 300 weight, charcoal.
Item name	Sans-serif, 24px, 400 weight, 1.16 line-height, -0.24px letter-spacing, light-charcoal.
Item description	18px, 300 weight, 1.6 line-height, light-charcoal.
Gap (name → desc)	8px.
Gap (between items)	36px.
Gap (title → items)	48px.
2-col grid gap	36px. Stacks to 1-col on mobile.