Design System / Modules

Profile

standardContentshared

Avatar with name, handle, and meta, plus an optional action slot.

Demo

AR
Alex Rivera
Creative Director
London, UK
alexrivera.co

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-11
--gray-a3
--gray-9
--module-surface
--gray-a5

Token contract

SEMANTIC SLOTS

--module-surface

RADIX COLOUR SCALES

--gray-11--gray-a3--gray-9--gray-a5

LAYOUT & TYPE

--radius-4

Anatomy

LAYERS

Profile ModuleCard (filled) · row
AvatarBox (96px, flush left)
RowRow (padded)
IdentityColumn
NameRadix Text
Title / OccupationRadix Text
LocationRadix Text
WebsiteRadix Text
SocialsRow (icon buttons)
ExpandIcon Button (arrow →)

RADIX COMPONENTS

BoxFlexText

SHARED COMPOSITES

None — self-contained.

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
nameNametext—Alex Rivera
occupationTitle / Occupationtext—Creative Director
locationLocationtext—London, UK
websiteWebsitetext—alexrivera.co
bioBio (expanded)text—Building at the intersection of …

Registry

Filemodules/shared/ProfileModule/ProfileModule.tsx
ComponentProfileModule
Tier / groupstandard · shared
Statusbuilt
Client referencescnx, genesys, hlls