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.
This is a complete profile with default centered alignment:
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),honorific: 'His Excellency',name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Nance MacFadin</Heading>),jobtitle: 'Help Desk Operator',organization: 'Schuster-Senger',socialIcons: (<SocialIconsvalues={[{id: 'twitter',icon: (<Linkhref="https://twitter.com/nance-mcfadin"sx={{ color: 'inherit' }}><TwitterIcon size={24} title="Follow me on Twitter" /></Link>),},{id: 'github',icon: (<Linkhref="https://github.com/nance-mcfadin"sx={{ color: 'inherit' }}><GitHubIcon size={24} title="Follow me on GitHub" /></Link>),},]}m={1}/>),badges: ['Committee Member', 'Keynote Speaker'],}}m={2}/>
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
):
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),honorific: 'His Excellency',name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'start' }}>Nance MacFadin</Heading>),jobtitle: 'Help Desk Operator',organization: 'Schuster-Senger',socialIcons: (<SocialIconsvalues={[{id: 'twitter',icon: (<Linkhref="https://twitter.com/nance-mcfadin"sx={{ color: 'inherit' }}><TwitterIcon size={24} title="Follow me on Twitter" /></Link>),},{id: 'github',icon: (<Linkhref="https://github.com/nance-mcfadin"sx={{ color: 'inherit' }}><GitHubIcon size={24} title="Follow me on GitHub" /></Link>),},]}m={1}/>),badges: ['Committee Member', 'Keynote Speaker'],}}align="start"m={2}/>
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
):
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),honorific: 'His Excellency',name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'end' }}>Nance MacFadin</Heading>),jobtitle: 'Help Desk Operator',organization: 'Schuster-Senger',socialIcons: (<SocialIconsvalues={[{id: 'twitter',icon: (<Linkhref="https://twitter.com/nance-mcfadin"sx={{ color: 'inherit' }}><TwitterIcon size={24} title="Follow me on Twitter" /></Link>),},{id: 'github',icon: (<Linkhref="https://github.com/nance-mcfadin"sx={{ color: 'inherit' }}><GitHubIcon size={24} title="Follow me on GitHub" /></Link>),},]}m={1}/>),badges: ['Committee Member', 'Keynote Speaker'],}}align="end"m={2}/>
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:
<ProfilePreviewprofile={{avatar: (<Imagealt="Willow Rangall"sx={{ borderRadius: '50%', height: 64, width: 64 }}src="/avatar3.png"/>),}}m={2}/>
This is a profile without job title:
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Nance MacFadin</Heading>),organization: 'Schuster-Senger',badges: ['Committee Member', 'Keynote Speaker'],}}m={2}/>
This is a profile without organization:
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Nance MacFadin</Heading>),jobtitle: 'Help Desk Operator',badges: ['Committee Member', 'Keynote Speaker'],}}m={2}/>
This is a profile without job title and organization:
<ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Nance MacFadin</Heading>),badges: ['Committee Member', 'Keynote Speaker'],}}m={2}/>
This is a profile with avatar image and name only:
<ProfilePreviewprofile={{avatar: (<Imagealt="Suzy Cahan"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar4.png"/>),name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Suzy Cahan</Heading>),}}m={2}/>
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:
<ProfilePreviewprofile={{avatar: (<Imagealt="Sandra Abramovici"sx={{borderRadius: '50%',height: [32, 64, 128],width: [32, 64, 128],}}src="/avatar5.png"/>),name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Sandra Abramovici</Heading>),}}m={2}/>
ProfilePreview
supports space props and
color props from
Styled System.
Name | Type | Default | Required | Description |
---|---|---|---|---|
profile | Object | ✓ | See below. | |
align | start , center or end | center | Alignment of profile (responsive). | |
variant | String | badges.primary | Variant for optional badges. |
Name | Type | Default | Required | Description |
---|---|---|---|---|
avatar | Node | ✓ | Avatar image (composition pattern). | |
honorific | String | Honorific title. | ||
name | Node | Full name (composition pattern). You need to make sure that this component aligns with above align prop. | ||
jobtitle | String | Job title. | ||
organization | String | Organization name. | ||
socialIcons | Node | Social icons (composition pattern). You can use SocialIcons or build your own component. | ||
badges | Array of String | Badges with roles. |
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.
<ThemeProvidertheme={{badges: {secondary: {color: 'background',bg: 'secondary',},},}}><ProfilePreviewprofile={{avatar: (<Imagealt="Nance MacFadin"sx={{ borderRadius: '50%', height: 128, width: 128 }}src="/avatar0.png"/>),honorific: 'His Excellency',name: (<Heading as="div" sx={{ fontSize: 4, textAlign: 'center' }}>Nance MacFadin</Heading>),jobtitle: 'Help Desk Operator',organization: 'Schuster-Senger',socialIcons: (<SocialIconsvalues={[{id: 'twitter',icon: (<Linkhref="https://twitter.com/nance-mcfadin"sx={{ color: 'inherit' }}><TwitterIcon size={24} title="Follow me on Twitter" /></Link>),},{id: 'github',icon: (<Linkhref="https://github.com/nance-mcfadin"sx={{ color: 'inherit' }}><GitHubIcon size={24} title="Follow me on GitHub" /></Link>),},]}m={1}/>),badges: ['Committee Member', 'Keynote Speaker'],}}variant="badges.secondary"m={2}/></ThemeProvider>
The following URLs can be used for visual regression testing:
@undataforum/preset
)@undataforum/preset
)@undataforum/preset
)@undataforum/preset
)