Skip to content

ProfilePreview

Experimental

A ProfilePreview is used to display a profile in a list of profiles, e.g., on an overview page, or as header of a profile page.

Examples

This is a complete profile with default centered alignment:

Nance MacFadin
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker

Note that the component passed in with the name prop inside the profile object sets textAlign to center to align a long name correctly.

ProfilePreview can also be aligned left (align start):

Nance MacFadin
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker

Note that the component passed in with the name prop inside the profile object sets textAlign to start to align a long name correctly.

ProfilePreview can also be aligned right (align end):

Nance MacFadin
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker

Note that the component passed in with the name prop inside the profile object sets textAlign to end to align a long name correctly.

In this example we render minimal profile with avatar only:

Willow Rangall

This is a profile without job title:

Nance MacFadin
Nance MacFadin
Schuster-Senger
Committee Member
Keynote Speaker

This is a profile without organization:

Nance MacFadin
Nance MacFadin
Help Desk Operator
Committee Member
Keynote Speaker

This is a profile without job title and organization:

Nance MacFadin
Nance MacFadin
Committee Member
Keynote Speaker

This is a profile with avatar image and name only:

Suzy Cahan
Suzy Cahan

Since the avatar prop uses composition to render the avatar image, you have full control over how to render it. In this example we make the avatar image responsive:

Sandra Abramovici
Sandra Abramovici

System props

ProfilePreview supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
profileObjectSee below.
alignstart, center or endcenterAlignment of profile (responsive).
variantStringbadges.primaryVariant for optional badges.

Profile

NameTypeDefaultRequiredDescription
avatarNodeAvatar image (composition pattern).
honorificStringHonorific title.
nameNodeFull name (composition pattern). You need to make sure that this component aligns with above align prop.
jobtitleStringJob title.
organizationStringOrganization name.
socialIconsNodeSocial icons (composition pattern). You can use SocialIcons or build your own component.
badgesArray of StringBadges with roles.

Variants

ProfilePreview adapts to its parent's colors except for the badges. You can customize the badges by providing a variant to the variant prop. This variant needs to exist in your theme to take effect. The default variant is badges.primary. Even if this variant does not exist, the component renders with Theme UI's Badge's defaults.

In this example we render ProfilePreview with variant badges.secondary, which needs to be defined in your theme. You normally don't do this with an additional ThemeProvider, but in your theme file or preset. Using ThemeProvider in the example belowe allows you to play around variant badges.secondary in the source code.

Nance MacFadin
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker

Visual regression testing

The following URLs can be used for visual regression testing: