Avatars
Examples for opting different size of image classes.
Example
Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size.
Initials
In cases where no image, use initials instead.
Shapes
Use border classes or .avatar-circle to make avatars more rounded.
Ratio
Enable 4:3 (four-by-three) ratio size between the width and the height of an avatar using an .avatar-4by3 modifier class.
Colors
Front includes several predefined avatar styles for more usage. Use .avatar-* classes.
Use .avatar-soft-* classes.
Border
Use .avatar-border-lg to wrap avatars with white border color.
Dashed
Use .avatar-border-dashed to wrap avatars with dashed border type.
Centered
Use .avatar-centered to center align.
Group
Group your avatars with the help of a .avatar-group class. Available for all avatar sizes classes.
A
2+
A
2+
A
2+
Status
Use .avatar-status to add all kinds of status indicators.
Looking for larger or smaller status size? Add .avatar-sm-status or .avatar-lg-status for additional sizes.