Design System

Product offer card

The product shot and the pricing panel as one surface: media well → name/detail → term chooser → live price → CTA, in a single card (the offer-band pattern, 2026-08-24). Category pages used to render a PhotoFrame beside a body column that carried a static “from $/mo” line and a nested price card — the price stated twice, and three nested containers eating horizontal space on mobile.

It is a composition, not a new shell: PhotoFrame renders the shot with the original frame essence — the rounded backdrop panel, evenly matted — except the mat is the card’s own surface (transparent frame vars), so the shot blends into the pricing beneath it — and PriceCard/TermSelector carry the pricing mechanics unchanged, through PriceCard’s new media + header slots. Two rules ride along: the live figure is the only price on the card — never add a “from” line beside it — and shared trust content (inclusion lists, payment badges, disclaimers) renders once beside the card grid, not inside every card.

import from @halwel/ui/components/product/ProductOfferCard

Variants

The offer — shot, ladder, live price, one card
Compounded semaglutide vial
GLP-1

Compounded Semaglutide

weekly · compounded

Compare plan lengths

$199/mo × 12

$149/mo

$1,788 charged once your prescription is approved · you save $600

Check your eligibility

A licensed provider reviews every intake before treatment is prescribed. Learn more about Semaglutide

flag chip on the media; PDP routing as fine print

The pair — two offers, shared promise band below
Compounded semaglutide vial
GLP-1

Compounded Semaglutide

weekly · compounded

Compare plan lengths

$199/mo × 12

$149/mo

$1,788 charged once your prescription is approved · you save $600

Check your eligibility

A licensed provider reviews every intake before treatment is prescribed. Learn more about Semaglutide

Compounded tirzepatide vial
Dual-action GIP/GLP-1

Compounded Tirzepatide

weekly · compounded

Compare plan lengths

$299/mo × 12

$232/mo

$2,784 charged once your prescription is approved · you save $804

Check your eligibility

A licensed provider reviews every intake before treatment is prescribed. Learn more about Tirzepatide

the weight-loss offerings band shape

Mobile column — one container, one mat
Compounded tirzepatide vial
Dual-action GIP/GLP-1

Compounded Tirzepatide

weekly · compounded

Compare plan lengths

$299/mo × 12

$232/mo

$2,784 charged once your prescription is approved · you save $804

Check your eligibility

A licensed provider reviews every intake before treatment is prescribed.

the pattern's point: no card-in-card, no width lost

Preview — same object, no CTA
Compounded semaglutide vial
Preview

Compounded Semaglutide

weekly · compounded

One price, everything included

$169/mo

$507 charged once your prescription is approved · you save $90

Pricing shown for review. Not yet available to purchase.

purchasable={false}, exactly as TermSelector defines it