Avatar
User profile images with fallback and status indicators
Examples
Default
Basic avatar with profile image.
Account Settings
Manage your account details and preferences.
Password Settings
Update your password to keep your account secure.
Notification Preferences
Choose how you want to be notified.
html
Sizes
Avatar in different sizes from xs to 3xl.
.progress-xs
.progress-sm
.progress (default)
.progress-lg
html
Fallback
Display initials when no image is available.
B.A
A.J
html
Status Indicators
Show online, offline, busy, or away status.
today
$ / orders
( $ in the last year )
yesterday
$ / orders
( $ in the last year )
last week
$ / orders
( $ in the last year )
last month
$ / orders
( $ in the last year )
last 90-days
$ / orders
( $ in the last year )
html
Avatar Group
Stacked avatars with overlap effect.
+5
html
Usage
The avatar component is CSS-only. Located at src/components/ui/avatar/avatar.scss
Available Classes
.avatar
.avatar-image
.avatar-fallback
.avatar-xs
.avatar-sm
.avatar-lg
.avatar-xl
.avatar-2xl
.avatar-rounded
.avatar-status
.avatar-group
.avatar-ring