The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Default avatar is square in shape. For rounded and circle avatar add .avatar-rounded
modifier classes respectively.
Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm
or .avatar-xs
for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.
Fancy larger or smaller avatar? Add position-relative
and position classes with badge Indicators.
Fancy larger or smaller avatar? Add position-relative
and position classes with badge.
Wrap .initial-wrap
with .avatar
classess.
Add icons inside .initial-wrap
classes.
Add color classes like .avatar-primary,.avatar-info
with avatar.
Add soft color classes like.avatar .avatar-soft-*
for soft colors.
Use .avatar-logo
with avatar.
In need of an avatar, but not the image avatar? Replace the default modifier class with avatar-group avatar-group-*
ones to create avatar with name initials.
For overlapped group of avatars replace default modifier class with .avatar-group-overlapped
.