UI Components Easy

Cookbook — Prep/cook time · difficulty · diet badges

A copy-ready recipe meta badge row for cookbook layouts, built in warm cream-and-tomato colors with inline SVG icons and accessible labels. Pill badges cover prep, cook, and total time with a clock glyph, servings, and a color-coded difficulty chip for easy, medium, and hard. Diet tags handle vegetarian, vegan, gluten-free, and keto, each with its own icon and tint. Three styled variants show full and compact rows, and a small demo toggles diet tags on and off while updating a polite aria-live summary.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --cream: #faf6ef;
  --paper: #fffdf8;
  --ink: #2b2622;
  --ink-2: #5c534a;
  --muted: #8a7f73;
  --tomato: #d6452b;
  --tomato-d: #b8351e;
  --saffron: #e8a33d;
  --sage: #7c8a6b;
  --clay: #c8775a;
  --line: rgba(43, 38, 34, 0.12);
  --line-2: rgba(43, 38, 34, 0.2);
  --ok: #3f8f5f;
  --warn: #d98a2b;
  --danger: #c8412b;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(43, 38, 34, 0.1);
  --sh-2: 0 10px 30px rgba(43, 38, 34, 0.1);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  padding: clamp(20px, 5vw, 56px);
}

.kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tomato);
}

/* ---------- Header ---------- */
.page-head {
  max-width: 1040px;
  margin: 0 auto 36px;
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.lede {
  margin: 0;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.card--compact {
  grid-template-columns: 170px 1fr;
}

.card-photo {
  position: relative;
  min-height: 200px;
  background: radial-gradient(120% 90% at 25% 20%, rgba(255, 255, 255, 0.45), transparent 60%),
    linear-gradient(150deg, var(--saffron), var(--tomato));
  display: grid;
  place-items: center;
}
.card-photo--tomato {
  background: radial-gradient(120% 90% at 25% 20%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(80% 70% at 80% 85%, rgba(0, 0, 0, 0.12), transparent),
    linear-gradient(150deg, var(--saffron), var(--tomato-d));
}
.card-photo--sage {
  background: radial-gradient(120% 90% at 25% 20%, rgba(255, 255, 255, 0.4), transparent 60%),
    linear-gradient(150deg, #aebf8f, var(--sage));
}
.card-photo--clay {
  background: radial-gradient(120% 90% at 25% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(150deg, var(--clay), #7a3f2c);
}
.photo-emoji {
  font-size: 3.4rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.photo-emoji--2 {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 2rem;
  opacity: 0.92;
}

.card-body {
  padding: clamp(18px, 3vw, 28px);
}
.card-body h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 8px;
  line-height: 1.1;
}
.card-desc {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------- Meta badge row ---------- */
.meta-row,
.diet-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meta-row {
  margin-bottom: 14px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink);
}
.badge .ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
.badge-k {
  color: var(--muted);
  font-weight: 500;
}
.badge-v {
  font-weight: 600;
}
.badge--total {
  background: #fcefe8;
  border-color: rgba(214, 69, 43, 0.22);
}
.badge--total .ic {
  color: var(--tomato);
}
.badge--sm {
  padding: 6px 11px;
  font-size: 0.8rem;
}

/* difficulty colors */
.badge--diff .ic {
  color: currentColor;
}
.badge--diff-easy {
  color: #2f6e48;
  background: #e9f4ed;
  border-color: rgba(63, 143, 95, 0.3);
}
.badge--diff-med {
  color: #9a6011;
  background: #fbf0dc;
  border-color: rgba(217, 138, 43, 0.32);
}
.badge--diff-hard {
  color: #99311f;
  background: #fae7e2;
  border-color: rgba(200, 65, 43, 0.32);
}

/* ---------- Diet tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.tag .ic {
  width: 15px;
  height: 15px;
  flex: none;
}
.tag--veg {
  color: #2f6e48;
  background: #e9f4ed;
  border-color: rgba(63, 143, 95, 0.28);
}
.tag--vegan {
  color: #41723f;
  background: #eef5e7;
  border-color: rgba(124, 138, 107, 0.4);
}
.tag--gf {
  color: #9a6011;
  background: #fbf0dc;
  border-color: rgba(232, 163, 61, 0.4);
}
.tag--keto {
  color: #8c3f23;
  background: #f7e6dd;
  border-color: rgba(200, 119, 90, 0.4);
}

/* ---------- SVG defaults ---------- */
.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Demo ---------- */
.demo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: clamp(20px, 3vw, 30px);
}
.demo-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 0 0 8px;
}
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
}
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--cream);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.toggle .ic {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}
.toggle:hover {
  border-color: var(--tomato);
  color: var(--ink);
}
.toggle:active {
  transform: translateY(1px);
}
.toggle.is-on {
  background: var(--tomato);
  border-color: var(--tomato-d);
  color: #fff;
}
.toggle.is-on .ic {
  opacity: 1;
}
.toggle:focus-visible {
  outline: 3px solid rgba(214, 69, 43, 0.4);
  outline-offset: 2px;
}

.demo-preview {
  background: var(--cream);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 18px;
}
.diet-row--live {
  min-height: 34px;
}
.empty {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}
.sr-summary {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.85rem;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .card,
  .card--compact {
    grid-template-columns: 1fr;
  }
  .card-photo {
    min-height: 150px;
  }
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

(function () {
  "use strict";

  var DIETS = {
    veg: {
      label: "Vegetarian",
      cls: "tag--veg",
      icon:
        '<path d="M12 21c-5-3-8-7-8-11a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 4-3 8-8 11Z"/>',
    },
    vegan: {
      label: "Vegan",
      cls: "tag--vegan",
      icon:
        '<path d="M12 4c5 0 8 3 8 8 0 4-3 8-8 8s-8-4-8-8c0-5 3-8 8-8Z"/><path d="M12 20c0-6 2-9 6-11"/>',
    },
    gf: {
      label: "Gluten-free",
      cls: "tag--gf",
      icon:
        '<path d="M12 3v18M12 8c-3-2-5-1-6 1M12 8c3-2 5-1 6 1M12 13c-3-2-5-1-6 1M12 13c3-2 5-1 6 1"/><path d="M4 4l16 16"/>',
    },
    keto: {
      label: "Keto",
      cls: "tag--keto",
      icon: '<path d="M5 9c0-2 2-3 4-3 1 0 2 .5 3 .5S15 6 16 6c2 0 4 1 4 3 0 4-3 9-7 9S5 13 5 9Z"/>',
    },
  };

  var toggles = Array.prototype.slice.call(
    document.querySelectorAll(".toggle[data-diet]")
  );
  var liveList = document.getElementById("livediet");
  var emptyMsg = document.getElementById("empty");
  var summary = document.getElementById("summary");
  var toastEl = document.getElementById("toast");
  var toastTimer;

  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 1800);
  }

  function svg(inner) {
    return (
      '<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">' + inner + "</svg>"
    );
  }

  function render() {
    var active = toggles.filter(function (b) {
      return b.classList.contains("is-on");
    });

    liveList.innerHTML = "";
    active.forEach(function (b) {
      var key = b.getAttribute("data-diet");
      var d = DIETS[key];
      if (!d) return;
      var li = document.createElement("li");
      li.className = "tag " + d.cls;
      li.innerHTML = svg(d.icon) + "<span>" + d.label + "</span>";
      liveList.appendChild(li);
    });

    emptyMsg.hidden = active.length !== 0;

    var names = active.map(function (b) {
      return DIETS[b.getAttribute("data-diet")].label;
    });
    if (names.length === 0) {
      summary.textContent = "This recipe has no dietary tags.";
    } else {
      var list =
        names.length === 1
          ? names[0]
          : names.slice(0, -1).join(", ") + " and " + names[names.length - 1];
      summary.textContent =
        "This recipe is tagged " +
        list +
        " (" +
        names.length +
        (names.length === 1 ? " tag" : " tags") +
        ").";
    }
  }

  toggles.forEach(function (b) {
    b.addEventListener("click", function () {
      var on = !b.classList.contains("is-on");
      b.classList.toggle("is-on", on);
      b.setAttribute("aria-pressed", String(on));
      render();
      var name = DIETS[b.getAttribute("data-diet")].label;
      toast(name + (on ? " added" : " removed"));
    });
  });

  render();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Recipe Meta Badges — Cookbook</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="page-head">
    <p class="kicker">Cookbook &middot; Components</p>
    <h1>Recipe Meta Badges</h1>
    <p class="lede">A copy-ready row of pill badges for prep &amp; cook time, servings, difficulty, and dietary tags — built in warm cookbook colors with inline SVG icons and accessible labels.</p>
  </header>

  <main class="wrap">
    <!-- Variant 1: full meta row on a recipe card -->
    <section class="card" aria-labelledby="v1-title">
      <div class="card-photo card-photo--tomato" role="img" aria-label="Sun-dried tomato and basil orecchiette, illustrative">
        <span class="photo-emoji" aria-hidden="true">🍅</span>
        <span class="photo-emoji photo-emoji--2" aria-hidden="true">🌿</span>
      </div>
      <div class="card-body">
        <p class="kicker">Weeknight pasta</p>
        <h2 id="v1-title">Sun-Dried Tomato Orecchiette</h2>
        <p class="card-desc">Little ear-shaped pasta tossed with garlic-confit, torn basil, and a fistful of toasted breadcrumbs.</p>

        <ul class="meta-row" aria-label="Recipe details">
          <li class="badge">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6l-1.5-1.5M19 6l1.5-1.5M12 3v2"/><circle cx="12" cy="14" r="7"/><path d="M12 11v3l2 1.5"/></svg>
            <span class="badge-k">Prep</span><span class="badge-v">15 min</span>
          </li>
          <li class="badge">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11h16"/><path d="M6 11a6 6 0 0 1 12 0"/><path d="M5 19h14"/><path d="M8 6c0-1 1-1 1-2M12 6c0-1 1-1 1-2M16 6c0-1 1-1 1-2"/></svg>
            <span class="badge-k">Cook</span><span class="badge-v">20 min</span>
          </li>
          <li class="badge badge--total">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>
            <span class="badge-k">Total</span><span class="badge-v">35 min</span>
          </li>
          <li class="badge">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3"/><path d="M3 19a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.4"/><path d="M15.5 18a5 5 0 0 1 5.5-3.6"/></svg>
            <span class="badge-k">Serves</span><span class="badge-v">4</span>
          </li>
          <li class="badge badge--diff badge--diff-easy">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4 10-11"/></svg>
            <span class="badge-k">Difficulty</span><span class="badge-v">Easy</span>
          </li>
        </ul>

        <ul class="diet-row" aria-label="Dietary tags">
          <li class="tag tag--veg"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-5-3-8-7-8-11a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 4-3 8-8 11Z"/></svg><span>Vegetarian</span></li>
          <li class="tag tag--gf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18M12 8c-3-2-5-1-6 1M12 8c3-2 5-1 6 1M12 13c-3-2-5-1-6 1M12 13c3-2 5-1 6 1"/><path d="M4 4l16 16"/></svg><span>Gluten-free</span></li>
        </ul>
      </div>
    </section>

    <!-- Variant 2: compact inline badges -->
    <section class="card card--compact" aria-labelledby="v2-title">
      <div class="card-photo card-photo--sage" role="img" aria-label="Charred broccolini bowl, illustrative">
        <span class="photo-emoji" aria-hidden="true">🥦</span>
        <span class="photo-emoji photo-emoji--2" aria-hidden="true">🍋</span>
      </div>
      <div class="card-body">
        <p class="kicker">Plant bowl</p>
        <h2 id="v2-title">Charred Broccolini &amp; Tahini</h2>
        <ul class="meta-row meta-row--mini" aria-label="Recipe details">
          <li class="badge badge--sm">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>
            <span class="badge-v">25 min</span>
          </li>
          <li class="badge badge--sm">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3"/><path d="M3 19a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.4"/><path d="M15.5 18a5 5 0 0 1 5.5-3.6"/></svg>
            <span class="badge-v">2</span>
          </li>
          <li class="badge badge--sm badge--diff badge--diff-med">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4 10-11"/></svg>
            <span class="badge-v">Medium</span>
          </li>
        </ul>
        <ul class="diet-row" aria-label="Dietary tags">
          <li class="tag tag--vegan"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4c5 0 8 3 8 8 0 4-3 8-8 8s-8-4-8-8c0-5 3-8 8-8Z"/><path d="M12 20c0-6 2-9 6-11"/></svg><span>Vegan</span></li>
          <li class="tag tag--gf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18M12 8c-3-2-5-1-6 1M12 8c3-2 5-1 6 1M12 13c-3-2-5-1-6 1M12 13c3-2 5-1 6 1"/><path d="M4 4l16 16"/></svg><span>Gluten-free</span></li>
        </ul>
      </div>
    </section>

    <!-- Variant 3: hard difficulty + keto -->
    <section class="card card--compact" aria-labelledby="v3-title">
      <div class="card-photo card-photo--clay" role="img" aria-label="Slow-braised short rib, illustrative">
        <span class="photo-emoji" aria-hidden="true">🥩</span>
        <span class="photo-emoji photo-emoji--2" aria-hidden="true">🧄</span>
      </div>
      <div class="card-body">
        <p class="kicker">Sunday project</p>
        <h2 id="v3-title">Red-Wine Braised Short Rib</h2>
        <ul class="meta-row meta-row--mini" aria-label="Recipe details">
          <li class="badge badge--sm">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>
            <span class="badge-v">3 hr 20 min</span>
          </li>
          <li class="badge badge--sm">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3"/><path d="M3 19a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.4"/><path d="M15.5 18a5 5 0 0 1 5.5-3.6"/></svg>
            <span class="badge-v">6</span>
          </li>
          <li class="badge badge--sm badge--diff badge--diff-hard">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4 10-11"/></svg>
            <span class="badge-v">Hard</span>
          </li>
        </ul>
        <ul class="diet-row" aria-label="Dietary tags">
          <li class="tag tag--keto"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 9c0-2 2-3 4-3 1 0 2 .5 3 .5S15 6 16 6c2 0 4 1 4 3 0 4-3 9-7 9S5 13 5 9Z"/></svg><span>Keto</span></li>
          <li class="tag tag--gf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18M12 8c-3-2-5-1-6 1M12 8c3-2 5-1 6 1M12 13c-3-2-5-1-6 1M12 13c3-2 5-1 6 1"/><path d="M4 4l16 16"/></svg><span>Gluten-free</span></li>
        </ul>
      </div>
    </section>

    <!-- Interactive demo -->
    <section class="demo" aria-labelledby="demo-title">
      <div class="demo-head">
        <p class="kicker">Try it</p>
        <h2 id="demo-title">Toggle dietary tags</h2>
        <p class="card-desc">Flip the diet filters on and off — the badge row and the screen-reader summary update live.</p>
      </div>

      <div class="demo-grid">
        <div class="demo-controls" role="group" aria-label="Dietary tag toggles">
          <button type="button" class="toggle is-on" data-diet="veg" aria-pressed="true">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-5-3-8-7-8-11a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 4-3 8-8 11Z"/></svg>
            Vegetarian
          </button>
          <button type="button" class="toggle" data-diet="vegan" aria-pressed="false">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4c5 0 8 3 8 8 0 4-3 8-8 8s-8-4-8-8c0-5 3-8 8-8Z"/><path d="M12 20c0-6 2-9 6-11"/></svg>
            Vegan
          </button>
          <button type="button" class="toggle is-on" data-diet="gf" aria-pressed="true">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18M12 8c-3-2-5-1-6 1M12 8c3-2 5-1 6 1M12 13c-3-2-5-1-6 1M12 13c3-2 5-1 6 1"/><path d="M4 4l16 16"/></svg>
            Gluten-free
          </button>
          <button type="button" class="toggle" data-diet="keto" aria-pressed="false">
            <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 9c0-2 2-3 4-3 1 0 2 .5 3 .5S15 6 16 6c2 0 4 1 4 3 0 4-3 9-7 9S5 13 5 9Z"/></svg>
            Keto
          </button>
        </div>

        <div class="demo-preview">
          <p class="kicker">Live badge row</p>
          <ul class="diet-row diet-row--live" id="livediet" aria-label="Active dietary tags"></ul>
          <p class="empty" id="empty" hidden>No dietary tags selected.</p>
          <p class="sr-summary" id="summary" role="status" aria-live="polite"></p>
        </div>
      </div>
    </section>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>
  <script src="script.js"></script>
</body>
</html>

Prep/cook time · difficulty · diet badges

A single reusable meta row for recipe cards, rendered in three contexts. Each badge is a rounded pill with an inline SVG icon: a thermometer for prep, a steaming pot for cook, a clock for total time, and a paired-figures glyph for servings. Difficulty is a color-coded chip — sage green for easy, saffron for medium, tomato for hard — so the kitchen commitment reads at a glance. Beneath the meta row, dietary tags for vegetarian, vegan, gluten-free, and keto each carry their own icon and warm tint, with full text labels for screen readers.

The reference cards pair the badges with CSS-gradient food photography and food-emoji accents — a sun-dried tomato orecchiette, a charred broccolini bowl, and a red-wine braised short rib — to show the full row, a compact icon-led variant, and a high-difficulty keto example.

The interactive demo lets you toggle the four diet filters on and off. Each toggle is a real aria-pressed button; flipping one re-renders the live badge row, shows an empty-state line when nothing is selected, and rewrites a polite aria-live summary like This recipe is tagged Vegetarian and Gluten-free. Everything is keyboard-usable with visible focus rings, and the layout collapses to a single column by 720px.

Illustrative UI only — recipes & nutrition data are fictional, not dietary advice.