Avatar

Easily create avatar to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes.

Table of contents

• Usage
• Bordered
• Dot indicator
  • Style modifiers
  • Customizing indicator size
• Stacked

Usage

To get started with the Avatar component, simply wrap your image directly inside the .uk-avatar class or .uk-avatar-text if it’s just a text or initials.

Bordered

To add a border around your avatar, include the .uk-avatar-bordered class along with any other modifiers you like.

Dot indicator

To indicate status or notifications, you can add a small dot using the .uk-avatar-dot class. Or, choose one of the following classes to reposition the dot indicator:

• .uk-avatar-dot-top
• .uk-avatar-dot-top-left
• .uk-avatar-dot-top-right
• .uk-avatar-dot-right
• .uk-avatar-dot-bottom
• .uk-avatar-dot-bottom-left
• .uk-avatar-dot-bottom-right
• .uk-avatar-dot-left

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

• .uk-avatar-dot-danger
• .uk-avatar-dot-warning
• .uk-avatar-dot-success
• .uk-avatar-dot-info
• .uk-avatar-dot-muted

Customizing indicator size

You can also customize the size of indicator if you want.

Stacked

Stack multiple avatars together to represent a group or team. Use flex utilities and negative spacing to achieve the overlapping effect.