blue
View on GitHub

Avatar

An avatar displays a user’s profile picture or a representative image, often used to visually identify or represent a user.

Usage

Light
Blue
AH
<script>
	import { Avatar } from 'deskblocks';
</script>

<Avatar name="Alexander Hipp" src="/assets/avatar/pic1.jpg" />

Fallback

Light
Blue
Zoho Puvi
AH
AH
<Avatar name="Alexander Hipp" src="/assets/avatar/pic1.jpg" />

<!-- No Image -->
<Avatar name="Alexander Hipp" src="" />

<!-- No Initial & Image -->
<Avatar src="" />

Size

Light
Blue 
<Avatar size="small" src="/assets/avatar/pic3.jpg" />
<Avatar size="medium" src="/assets/avatar/pic3.jpg" />
<Avatar size="large" src="/assets/avatar/pic3.jpg" />

<!-- Custom Size -->
<Avatar size={50} src="/assets/avatar/pic3.jpg" />

Props

src string undefined The URL of the image to be displayed as the avatar.
name string undefined The name whose initials will be displayed as a fallback if the image is unavailable.
size “small” | “medium” | “large” “medium” Specifies the size of the avatar.
class string undefined Custom CSS class name for additional styling.