Design System / Modules

Collection

standardCommercefeatures

Titled list of collection entries — media thumb, label/subtitle, and chevron.

Demo

Collection

Tour TeeOwned · 2 variants

Vinyl — LimitedOwned

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.

--module-surface-raised
--gray-9
--module-fg
--module-surfacevia shared
--module-fg-mutedvia shared

Token contract

SEMANTIC SLOTS

--module-surface-raised--module-fg--module-surface ·shared--module-fg-muted ·shared

RADIX COLOUR SCALES

--gray-9

LAYOUT & TYPE

--radius-2--radius-4 ·shared

Anatomy

LAYERS

Collection ModuleModuleShell · card

Module HeaderRow

Module TitleRadix Text

Module CTARadix Badge

Module ContentColumn

Entry RowRow (per entry)

ThumbBox (media)

Title + SubtitleColumn (Radix Text ×2)

ChevronNative <svg>

RADIX COMPONENTS

BoxFlexText

SHARED COMPOSITES

ModuleShell

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.

Key	Label	Type	Options	Sample default
`title`	Module title	text	—	—
`header`	Show header	toggle	—	—

Registry

File	`modules/features/CollectionModule/CollectionModule.tsx`
Component	CollectionModule
Tier / group	standard · features
Status	built
Client references	cnx