Stock Status Badge - Everyday Interface Patterns

A static product availability card shows a pinned product name, In stock badge, shipping note, Add to cart button, and no inventory or cart service.

Program

Availability UI should show the current state and the next visible action. This lesson uses a pinned stock state only.

stock_status_badge.html

Visuals: captured from real browser rendering

<section class="stock-card" aria-labelledby="stock-title">
  <h2 id="stock-title">Web Sticker Pack</h2>
  <p><strong>Status</strong> <span class="badge">In stock</span></p>
  <p>Ships in 2 business days.</p>
  <button type="button">Add to cart</button>
  <p class="note">Static availability only; no inventory lookup or cart service runs.</p>
</section>
<style>
  .stock-card { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .stock-card p, .note { margin: 0; }
  .stock-card button { justify-self: start; padding: 8px 12px; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the stock card.
The section is labelled by the product title.
Show the pinned product name.
The product name is exact deterministic lesson data.
Show the stock badge.
The badge makes the pinned stock state visible.
Add the shipping note.
The shipping text gives a clear static consequence.
Show the cart affordance.
The button names a possible next action without running a cart service.
Check stock honesty.
Pinned product, stock badge, shipping note, button, and no cart service.

product name The card uses one pinned product name.

status badge The In stock badge makes availability visible.

no service The lesson should not imply inventory lookup or a cart service.