Design System / Modules

Ticketing

advancedCommercefeatures

Full-bleed media, event meta, and a list of ticket tiers with quantity steppers and a checkout CTA.

Demo

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

Source

The rendered structure, live from the demo above — hover a row to highlight the element in the demo.

Waiting for the demo to render…

Colour Mapping

Every colour token this module consumes, resolved under the active profile — neutral · light · brand default. Switch the profile above the demo to remap.

--gray-a3
--gray-11
--accent-9
--accent-contrast
--gray-a4
--module-surface
--gray-a5

Token contract

SEMANTIC SLOTS

--module-surface

RADIX COLOUR SCALES

--gray-a3--gray-11--accent-9--accent-contrast--gray-a4--gray-a5

LAYOUT & TYPE

--radius-1--radius-4--space-2--radius-2

Anatomy

LAYERS

Ticketing ModuleColumn · borderless
HeaderRow
LabelRadix Text ("Upcoming Event")
View CalendarRadix Badge (soft pill)
FlyerAspect Ratio (3:4)
ImageNative <img>
Event MetaColumn
Event TitleRadix Text (size 7)
Date + TimesColumn (Radix Text ×2)
Venue + LocationColumn (Radix Text ×2)
Tickets Sub-cardBox (gray-3 surface)
LabelRadix Text ("Get Tickets")
Tier RowRow (per tier; sold out = dimmed + red Badge)
Tier Name + PriceColumn
Active TierRow (outlined)
Tier Name + PriceColumn
Quantity StepperRow (− count +)
Module CTACtaRow (label + arrow)

RADIX COMPONENTS

AspectRatioBadgeBoxFlexText

SHARED COMPOSITES

CtaRow

Fields

The client-editable schema (builder-kit/lib/fields.ts) — what the Builder's fields rail and the Portal Builder expose. Defaults are the sample props the demo renders with.

KeyLabelTypeOptionsSample default
titleModule titletext——
eventTitleEvent titletext—Total Sonic Knockout 3
dateLabelDatetext—Monday 1 September
timeLabelTimestext—19:00 – 23:00
venueVenuetext—Printworks
locationLocationtext—Surrey Quays, London
actionLabelCTA labeltext——
aspectRatioAspect ratioaspect-ratio1:1, 3:4—
headerShow headertoggle——

Registry

Filemodules/features/TicketingModule/TicketingModule.tsx
ComponentTicketingModule
Tier / groupadvanced · features
Statusbuilt
Client referencescnx, genesys