Inset Callout

Stats (Default)

Description paragraph, kale stat items with kale/20% bottom borders, and an optional source paragraph.

<div data-nama="inset-callout" class="nama-inset-callout">
  <p>Description text before the stats.</p>
  <div data-nama="inset-callout-items" class="nama-inset-callout-items">
    <div data-nama="inset-callout-stat" class="nama-inset-callout-stat">13% lower risk of death</div>
    <div data-nama="inset-callout-stat" class="nama-inset-callout-stat">12% lower risk from heart disease</div>
  </div>
  <p>Source citation here.</p>
</div>

Element	Style
Description / source	Body-md, 300 weight, charcoal.
Stat items	20px, 400 weight, kale (#28724F), 1.06 line-height. 28px vertical padding.
Stat border	rgba(40,114,79,0.2) bottom border.
Items max-width	523px.
Gap	24px between description, items, and source.

---

List

A serif title followed by bordered entries, each with an 18px title and body description. Good for recipe roundups or feature lists.

<div data-nama="inset-callout" class="nama-inset-callout nama-layout-list" data-layout="list">
  <div data-nama="inset-callout-title" class="nama-inset-callout-title">IV Winter Citrus Recipes</div>
  <div data-nama="inset-callout-items" class="nama-inset-callout-items">
    <div data-nama="inset-callout-entry" class="nama-inset-callout-entry">
      <div data-nama="inset-callout-entry-title" class="nama-inset-callout-entry-title">Carrot Renewal</div>
      <p>A bright, earthy juice with fresh carrots and ginger.</p>
    </div>
    <div data-nama="inset-callout-entry" class="nama-inset-callout-entry">
      <div data-nama="inset-callout-entry-title" class="nama-inset-callout-entry-title">Green Citrus Revive</div>
      <p>Leafy greens meet orange and grapefruit.</p>
    </div>
  </div>
</div>

Element	Style
Title	Serif, 48px desktop (clamps to 32px mobile), 300 weight, charcoal.
Entry border	#e0e0e0 top (first item) + bottom on each entry.
Entry padding	48px vertical, 24px horizontal (32px/16px mobile).
Entry title	18px, 400 weight, light-charcoal.
Entry body	Body-md, 300 weight, charcoal. 16px gap below title.
Gap	48px between title and items.