Avatar
User profile images and initials
Examples
Avatars
Avatars with different sizes and shapes
Avatars with Profile
Avatars with different sizes and shapes
Kamal Singh kamal@wdcoders.com
Rahul Sharma rahul@gmail.com
Admin User admin@system.com
Pro Plan
Code
<wdc-avatar size="sm" fallback="S"></wdc-avatar>
<wdc-avatar size="md" fallback="M"></wdc-avatar>
<wdc-avatar size="lg" fallback="L"></wdc-avatar>
<wdc-avatar size="xl" fallback="XL"></wdc-avatar>
<wdc-avatar shape="square" fallback="SQ"></wdc-avatar>
<wdc-avatar src="{{imgUrl}}" fallback="JD"></wdc-avatar>API Reference
| Input | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | Image source URL. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the avatar. |
| shape | 'circle' | 'square' | 'circle' | Shape of the avatar. |
| fallback | string | undefined | Fallback text to display when image is not available. |
| alt | string | undefined | Alternative text for the image. |