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:
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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 : (
< SocialIcons
values = { [
{
id : 'twitter' ,
icon : (
< Link
href = " https://twitter.com/nance-mcfadin "
sx = { { color : 'inherit' } }
>
< TwitterIcon size = { 24 } title = " Follow me on Twitter " />
</ Link >
) ,
} ,
{
id : 'github' ,
icon : (
< Link
href = " 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):
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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 : (
< SocialIcons
values = { [
{
id : 'twitter' ,
icon : (
< Link
href = " https://twitter.com/nance-mcfadin "
sx = { { color : 'inherit' } }
>
< TwitterIcon size = { 24 } title = " Follow me on Twitter " />
</ Link >
) ,
} ,
{
id : 'github' ,
icon : (
< Link
href = " 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):
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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 : (
< SocialIcons
values = { [
{
id : 'twitter' ,
icon : (
< Link
href = " https://twitter.com/nance-mcfadin "
sx = { { color : 'inherit' } }
>
< TwitterIcon size = { 24 } title = " Follow me on Twitter " />
</ Link >
) ,
} ,
{
id : 'github' ,
icon : (
< Link
href = " 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:
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " Willow Rangall "
sx = { { borderRadius : '50%' , height : 64 , width : 64 } }
src = " /avatar3.png "
/>
) ,
} }
m = { 2 }
/ >
This is a profile without job title:
Nance MacFadin
Schuster-Senger
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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:
Nance MacFadin
Help Desk Operator
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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:
Nance MacFadin
Committee Member
Keynote Speaker
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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:
Suzy Cahan
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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:
Sandra Abramovici
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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 endcenterAlignment of profile (responsive). variant String badges.primaryVariant 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 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.
His Excellency
Nance MacFadin
Help Desk Operator
Schuster-Senger
Committee Member
Keynote Speaker
< ThemeProvider
theme = { {
badges : {
secondary : {
color : 'background' ,
bg : 'secondary' ,
} ,
} ,
} }
>
< ProfilePreview
profile = { {
avatar : (
< Image
alt = " 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 : (
< SocialIcons
values = { [
{
id : 'twitter' ,
icon : (
< Link
href = " https://twitter.com/nance-mcfadin "
sx = { { color : 'inherit' } }
>
< TwitterIcon size = { 24 } title = " Follow me on Twitter " />
</ Link >
) ,
} ,
{
id : 'github' ,
icon : (
< Link
href = " 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:
