Library · Components
Components.
Production-ready primitives. Each has a live preview, source code, when-to-use notes, and variants. Use as building blocks for Perelel interfaces.
Action
Buttons
Primary, ghost, color-coded life-stage buttons, tags, inline links.
Prompting
Prompting Cards
One playing-card chassis, two modes — quiz capture and informational present.
1st Trimester Prenatal Pack
$48
Commerce
Product Card
SKU display with life-stage stripe, hover lift, slide-up CTA bar.
Content
Benefit List
Hairline-checked benefits column. Used on packaging and PDP.
Editorial
Doctor's Note
Hairline-grid clinical form template. Editorial credibility marker.
Layout
Section Header
Eyebrow + rule + heading + lede. Editorial and clinical variants.
Overlay
Quick View
Centered modal: packaging on a beige field, full meta column, charcoal ATC.
Timeline
Timeline Carousel
Six vertical life-stage panels. Hover or focus a panel to expand it into a portrait frame.
Navigation
Mega Nav
Sage top bar with left wordmark and centered primary links. Four-column hover-to-open mega panel.
Commerce
Subscribe & Save
Price-variant treatments for the Subscribe & Save buy box, across four life-stage palettes.
PDP
What's Inside
The “So, what's inside?” ingredient module as the Pill Stage, in four motion treatments across life stages.
PDP
PDP Trust Strip
The three-badge reassurance row under Add to Cart. Stage-aware seated discs, with a flat animation variant preserved alongside.