Design System / Modules

Gallery

standardMediafeatures

Image gallery with two layouts — carousel (scroll-snap strip) or album (fanned photo stack).

Demo

Album Title

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-5
--gray-8
--gray-a3
--module-fg
--module-surface
--module-fg-mutedvia shared
--seed-9via shared
--gray-a6via shared

Token contract

SEMANTIC SLOTS

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

SEED SCALE

--seed-9 ·shared

RADIX COLOUR SCALES

--gray-5--gray-8--gray-a3--gray-a6 ·shared

LAYOUT & TYPE

--radius---radius-3--radius-4

Anatomy

LAYERS

Gallery ModuleModuleShell · card

Carousel layoutColumn

Module HeaderRow

Module TitleRadix Text

View AllPill (soft) — button

SlideAspect Ratio (1:1) · scroll-snap (per image)

ImageNative <img>

Pagination DotsRow (overlay)

Album layoutColumn (centered)

Album TitleRadix Heading

SubtitleRadix Text

Fanned stackBox (relative)

Photo Cardrotated, no border (up to 3)

View AlbumPill (overlay) — button

RADIX COMPONENTS

AspectRatioBoxFlexHeadingText

SHARED COMPOSITES

ModuleShellPaginationDots

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	—	Album Title
`subtitle`	Subtitle (album)	text	—	Unlock the Album
`layout`	Layout	select	carousel, album	carousel
`aspectRatio`	Aspect ratio	aspect-ratio	—	1:1
`header`	Show header	toggle	—	—

Registry

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