The anatomy Product and Ticketing share, and the default for anything transactional: full-bleed media with seed pagination dots, an info block (title + meta lines), a raised "fields" sub-card holding the configurable parts (variant chips, steppers, ticket tiers), and a full-width CtaRow closing the module. Each band is optional — Page Lock is the same stack without the fields band.
Rules
01Media band is borderless, cropped by the aspect-ratio tokens; pagination dots always paint the seed scale.
02Info block: title at size 3+ medium, meta lines at size 1–2 with muted support text.
03Configurable inputs live in one raised sub-card (--module-surface-raised) — never scattered.
04Selects and text inputs inside the fields band are soft; steppers are compact icon buttons.
05The module closes with CtaRow — a full-width Radix Button (label left, arrow right); solid for the primary action, soft for locked/secondary states.
In practice
ProductMedia + dots · title + meta · fields sub-card (colour/size/quantity) · Add to bag.
Product
Tour Tee — Summer ’26
Summer ’26 dropShips early August
Heavyweight cottonUnisex fit
Fields
Color
Black
Size
Size Guide +
Quantity
1
Total£35.00
TicketingMedia · event info · tier list as the fields band · Get Tickets.
Upcoming EventView Calendar
Total Sonic Knockout 3
Monday 1 September19:00 – 23:00
PrintworksSurrey Quays, London
Get Tickets
Early Bird£25
Sale Ended
General Admission£35
VIP£75
1
Page LockThe stack without a fields band — media (lock badge) · info · state-flipping CTA.
Exclusive drop
Summer '26 — early accessshop.departmnt.xyzAccess: Tour '26 claimers