ValuePropsStrip
molecules
Horizontal strip of 3-4 value proposition items with icon, heading, and description. Used in storefront landing pages to communicate trust signals (secure payment, instant delivery, etc.).
ARIA Role: region
Demo
Demo for ValuePropsStrip (molecules)
Horizontal strip of 3-4 value proposition items with icon, heading, and description. Used in storefront landing pages to communicate trust signals (secure payment, instant delivery, etc.).
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | Array<{ icon: string; heading: string; description: string }> | Yes | — | 3-4 value props (minItems=3, maxItems=4 per NASA Rule 2). Each: icon, heading, description. |
variant | 'default' | 'compact' | No | 'default' | |
ariaLabel | string | Yes | — | Required for region landmark. Examples: 'Why ePassLive' or 'Event benefits'. |
TypeScript Interface
interface ValuePropsStripProps extends BaseMoleculeProps { items: { icon: string; heading: string; description: string }[]; variant?: 'default' | 'compact'; ariaLabel: string; }Assertions (NASA Rule 5)
- [type]items must have minItems=3, maxItems=4 (NASA Rule 2)(NASA Rule 2)
- [aria]Strip must have aria-label (region landmark). Items announced to screen readers via aria-live.(WCAG 1.3.1, 4.1.2)
Usage
Import
import { Valuepropsstrip } from '@epasslive/design-system'Basic
<Valuepropsstrip />With Variants
<Valuepropsstrip variant="primary" size="md" />