Avatar

Avatars are a great way to personalize your website and make it more engaging. They can be used to represent a person, a group of people, or even a brand.

Default Avatar

A circle avatar in various sizes.

Source

<Avatar Size="Size.ExtraSmall" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Small" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Medium" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.ExtraLarge" ImageSource="/images/profile/51.jpg" />

Square Avatar

A square avatar in various sizes.

Source

<Avatar Size="Size.ExtraSmall" Shape="AvatarShape.Square" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Small" Shape="AvatarShape.Square" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Medium" Shape="AvatarShape.Square" ImageSource="/images/profile/51.jpg"/>
<Avatar Size="Size.Large" Shape="AvatarShape.Square" ImageSource="/images/profile/51.jpg"/>
<Avatar Size="Size.ExtraLarge" Shape="AvatarShape.Square" ImageSource="/images/profile/51.jpg"/>

Avatar with Icon Placeholder

An avatar in various sizes with an icon placeholder.

Source

<Avatar Size="Size.ExtraSmall" />
<Avatar Size="Size.Small" />
<Avatar Size="Size.Medium" />
<Avatar Size="Size.Large" />
<Avatar Size="Size.ExtraLarge" />

Avatar with Initials Placeholder

An avatar with an initials placeholder.

Source

<Avatar Size="Size.ExtraSmall" Initials="JS" />
<Avatar Size="Size.Small" Initials="JS" />
<Avatar Size="Size.Medium" Initials="JS"/>
<Avatar Size="Size.Large" Initials="JS"/>
<Avatar Size="Size.ExtraLarge" Initials="JS"/>

Avatar with Status Indicator

An avatar with a status indicator in various colors.

Source

// Code
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Gray" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Teal" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Blue" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Indigo" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Purple" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Pink" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Red" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Orange" ImageSource="/images/profile/51.jpg" />
<Avatar Size="Size.Large" IndicatorVisible="true" IndicatorSemanticColor="AccentSemanticColor.Yellow" ImageSource="/images/profile/51.jpg" />