ValuePropsStrip

Usage

Data-in molecule: pass 3-4 typed items plus the required ariaLabel. Icons are Phosphor components imported per-icon from @phosphor-icons/react/dist/ssr (ADR-022) and render filled (weight="fill") on the teal chip.

import { ShieldCheck, Ticket, Wallet, Receipt } from "@phosphor-icons/react/dist/ssr";
import { ValuePropsStrip } from "@epasslive/design-system";

const valueProps = [
  { icon: ShieldCheck, heading: "Secure payment", description: "Encrypted checkout on every order." },
  { icon: Ticket, heading: "Instant tickets", description: "Scan-ready passes the moment you pay." },
  { icon: Wallet, heading: "Mobile wallet", description: "Tickets and receipts in one place." },
  { icon: Receipt, heading: "Refund guarantee", description: "Clear refunds on every purchase." },
];

// Default — 4 items beneath a hero
<ValuePropsStrip items={valueProps} ariaLabel="Why ePassLive" />

// Compact — 3 items on a dense surface
<ValuePropsStrip items={valueProps.slice(0, 3)} variant="compact" ariaLabel="Event benefits" />

Bounds

items.length must be 3-4, enforced at runtime. In development the component throws Error("ValuePropsStrip: items.length must be 3-4, got N"); in production it logs console.warn("[ValuePropsStrip] items.length must be 3-4, got N — rendering nothing.") and renders nothing. Do not pass 2 items — the guard fires by design (a two-item caption is a Caption, not a ValuePropsStrip). No out-of-bounds example is rendered live here on purpose: it would throw in dev and take this page down.

Responsive

One breakpoint, two layouts — no intermediate tablet grid. Below md: stacked single column, icon left of text. At md and up: horizontal 3-4-up row, icon above text. The compact variant uses the same ladder with a one-step smaller type scale (text-ep-xs vs text-ep-sm), tighter padding, tighter gaps and a 32px icon chip.

Accessibility

• The root is a role="region" landmark named by the required ariaLabel prop.
• Items render as a real ul / li list, so screen readers announce the item count.
• Icons are decorative (aria-hidden — the PhosphorIcon atom default); the heading carries the meaning.
• No aria-live by design — static content must not be a live region.
• Contrast meets WCAG AA in both themes: heading text-ep-text-heading and description text-ep-text-muted (5.49:1) on bg-ep-surface-card; icon glyph text-ep-text-teal (5.70:1) on bg-ep-teal/10.
• Items are non-interactive — no focus targets. href / onItemClick are deliberately excluded from the API.
• Reduced motion is respected: nothing animates by default.

Props