<span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" />
</span>
</span>
ReactHTML Snippet
John Snow | <Avatar imgUrl="/static/media/a01.c0656cf7.jpg" name="John Snow" /> <span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">John Snow</span>
</span>
</span> ReactHTML Snippet |
John Snow | <Avatar
imgUrl="/static/media/a01.c0656cf7.jpg"
name={<strong>John Snow</strong>}
/> <span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>John Snow</strong>
</span>
</span>
</span> ReactHTML Snippet |
Created byNatasha Special | <Avatar
imgUrl="/static/media/a21.9703cc6c.jpg"
name={<strong>Natasha Special</strong>}
textTop="Created by"
/> <span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a21.9703cc6c.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-text-top">Created by</span>
<span class="avatar-name">
<strong>Natasha Special</strong>
</span>
</span>
</span> ReactHTML Snippet |
Natasha SpecialSenior HR Manager | <Avatar
imgUrl="/static/media/a21.9703cc6c.jpg"
name={<strong>Natasha Special</strong>}
textBottom={<><strong>Senior</strong> HR Manager</>}
/> <span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a21.9703cc6c.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>Natasha Special</strong>
</span>
<span class="avatar-text-bottom">
<strong>Senior</strong> HR Manager
</span>
</span>
</span> ReactHTML Snippet |
Sizes
28px | <Avatar
imgUrl="/static/media/a02.fa362332.jpg"
name={<strong>28px</strong>}
sm
/> <span class="avatar avatar-sm">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a02.fa362332.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>28px</strong>
</span>
</span>
</span> ReactHTML Snippet |
38px | <Avatar
imgUrl="/static/media/a03.89105576.jpg"
name={<strong>38px</strong>}
/> <span class="avatar">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a03.89105576.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>38px</strong>
</span>
</span>
</span> ReactHTML Snippet |
60px | <Avatar
imgUrl="/static/media/a04.b4a6f3b0.jpg"
lg
name={<strong>60px</strong>}
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a04.b4a6f3b0.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>60px</strong>
</span>
</span>
</span> ReactHTML Snippet |
80px | <Avatar
imgUrl="/static/media/a05.ed29976e.jpg"
name={<strong>80px</strong>}
xl
/> <span class="avatar avatar-xl">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a05.ed29976e.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>80px</strong>
</span>
</span>
</span> ReactHTML Snippet |
100px | <Avatar
imgUrl="/static/media/a06.4d47556a.jpg"
name={<strong>100px</strong>}
xxl
/> <span class="avatar avatar-xxl">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a06.4d47556a.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>100px</strong>
</span>
</span>
</span> ReactHTML Snippet |
120px | <Avatar
imgUrl="/static/media/a07.f7e8bebd.jpg"
jumbo
name={<strong>120px</strong>}
/> <span class="avatar avatar-jumbo">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a07.f7e8bebd.jpg" />
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>120px</strong>
</span>
</span>
</span> ReactHTML Snippet |
Multiple Images
Group ConversationJust us | <Avatar
imgUrl={[
'/static/media/a05.ed29976e.jpg',
'/static/media/a15.ec9a4b77.jpg'
]}
lg
name={<strong>Just us</strong>}
textTop="Group Conversation"
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<div class="avatar-image-multi-container s2">
<img alt="" class="avatar-image" src="/static/media/a05.ed29976e.jpg" />
<img alt="" class="avatar-image" src="/static/media/a15.ec9a4b77.jpg" />
</div>
</span>
<span class="avatar-content">
<span class="avatar-text-top">Group Conversation</span>
<span class="avatar-name">
<strong>Just us</strong>
</span>
</span>
</span> ReactHTML Snippet |
Group ConversationReading strong | <Avatar
imgUrl={[
'/static/media/a10.08642329.jpg',
'/static/media/a11.f961f960.jpg',
'/static/media/a22.68645ff0.jpg'
]}
lg
name={<strong>Reading strong</strong>}
textTop="Group Conversation"
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<div class="avatar-image-multi-container s3">
<img alt="" class="avatar-image" src="/static/media/a10.08642329.jpg" />
<img alt="" class="avatar-image" src="/static/media/a11.f961f960.jpg" />
<img alt="" class="avatar-image" src="/static/media/a22.68645ff0.jpg" />
</div>
</span>
<span class="avatar-content">
<span class="avatar-text-top">Group Conversation</span>
<span class="avatar-name">
<strong>Reading strong</strong>
</span>
</span>
</span> ReactHTML Snippet |
Group ConversationParty people | <Avatar
imgUrl={[
'/static/media/a09.ef0f5dd5.jpg',
'/static/media/a07.f7e8bebd.jpg',
'/static/media/a25.96289da0.jpg',
'/static/media/a23.43246f05.jpg'
]}
lg
name={<strong>Party people</strong>}
textTop="Group Conversation"
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<div class="avatar-image-multi-container s4">
<img alt="" class="avatar-image" src="/static/media/a09.ef0f5dd5.jpg" />
<img alt="" class="avatar-image" src="/static/media/a07.f7e8bebd.jpg" />
<img alt="" class="avatar-image" src="/static/media/a25.96289da0.jpg" />
<img alt="" class="avatar-image" src="/static/media/a23.43246f05.jpg" />
</div>
</span>
<span class="avatar-content">
<span class="avatar-text-top">Group Conversation</span>
<span class="avatar-name">
<strong>Party people</strong>
</span>
</span>
</span> ReactHTML Snippet |
Placeholders
PH28px | <Avatar
avatarPlaceholder={{
color: 'indigo',
content: 'PH'
}}
name={<strong>28px</strong>}
sm
/> <span class="avatar avatar-sm">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-indigo">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>28px</strong>
</span>
</span>
</span> ReactHTML Snippet |
PH38px | <Avatar
avatarPlaceholder={{
color: 'blue',
content: 'PH'
}}
name={<strong>38px</strong>}
/> <span class="avatar">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-blue">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>38px</strong>
</span>
</span>
</span> ReactHTML Snippet |
PH60px | <Avatar
avatarPlaceholder={{
color: 'green',
content: 'PH'
}}
lg
name={<strong>60px</strong>}
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-green">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>60px</strong>
</span>
</span>
</span> ReactHTML Snippet |
PH80px | <Avatar
avatarPlaceholder={{
color: 'red',
content: 'PH'
}}
name={<strong>80px</strong>}
xl
/> <span class="avatar avatar-xl">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-red">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>80px</strong>
</span>
</span>
</span> ReactHTML Snippet |
PH100px | <Avatar
avatarPlaceholder={{
color: 'orange',
content: 'PH'
}}
name={<strong>100px</strong>}
xxl
/> <span class="avatar avatar-xxl">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-orange">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>100px</strong>
</span>
</span>
</span> ReactHTML Snippet |
PH120px | <Avatar
avatarPlaceholder={{
color: 'yellow',
content: 'PH'
}}
jumbo
name={<strong>120px</strong>}
/> <span class="avatar avatar-jumbo">
<span class="avatar-image-wrapper">
<span class="avatar-placeholder bg-yellow">PH</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>120px</strong>
</span>
</span>
</span> ReactHTML Snippet |
Other elements
Top help you render status etc.
O60px | <Avatar
imgUrl="/static/media/a04.b4a6f3b0.jpg"
leftEl={<span>O</span>}
lg
name={<strong>60px</strong>}
/> <span class="avatar avatar-lg">
<span class="avatar-image-wrapper">
<img alt="" class="avatar-image" src="/static/media/a04.b4a6f3b0.jpg" />
<span class="avatar-left-el">
<span>O</span>
</span>
</span>
<span class="avatar-content">
<span class="avatar-name">
<strong>60px</strong>
</span>
</span>
</span> ReactHTML Snippet |
Prop table
className | Required: false |
type: string | |
className, e.g. "my-custom-styling" |
name | Required: false |
type: React.ReactNode | |
Name, group conversation, ... |
imgUrl | Required: false |
type: string | string[] | |
URL or multiple URLs to the image to be displayed |
avatarPlaceholder | Required: false |
type: { color: THEME_COLOR, content: React.ReactNode } | |
Placeholder if image is not available |
textBottom | Required: false |
type: React.ReactNode | |
Any (text) node, such as title, ... |
textTop | Required: false |
type: React.ReactNode | |
Any (text) node, such as title, ... |
rightEl | Required: false |
type: React.ReactNode | |
Element to be displayed on the right side of the Avatar |
leftEl | Required: false |
type: React.ReactNode | |
Element to be displayed on the left side of the Avatar |
sm | Required: false |
type: boolean | |
Renders smaller avatar with height 28px |
lg | Required: false |
type: boolean | |
Renders larger avatar with height 60px |
xl | Required: false |
type: boolean | |
Renders larger avatar with height 80px |
xxl | Required: false |
type: boolean | |
Renders larger avatar with height 100px |
jumbo | Required: false |
type: boolean | |
Renders larger avatar with height 120px |
...rest | Required: false |
type: any | |
Other properties are passed down to the wrapping element |