Avatar

Visual representation

The avatar component typically consists of a circular or square container with an image of the user's avatar or a placeholder.

• Visual UI
• HTML code

<div class="aegov-avatar" role="img">
	<img src="/img/user-thumbnail-01.jpg" alt="The user's full name">
</div>

Code structure

This is the basic code structure of how an avatar component has be created. An image wrapper in a div labelled with ` aegov-avatar ` will add the necessary styles.

<div class="aegov-avatar {avatar-size} {avatar-style}">
	<img src="/img/user-thumbnail-01.jpg" alt="User Avatar">
</div>

Style variation

The avatar component provides style variations that include:

• Squared avatar - the default state of an avatar when you add the ` .aegov-avatar ` class.
• Rounded avatar - if you need to style the avatar to be rounded, you must add the ` .avatar-rounded ` class additionally as a style.

• Visual UI
• HTML code

<div class="flex items-center gap-4">
	<div class="aegov-avatar">
		<img src="/img/user-thumbnail-01.jpg" alt="User Avatar">
	</div>
	<div class="aegov-avatar avatar-rounded">
		<img src="/img/user-thumbnail-01.jpg" alt="User Avatar">
	</div>
</div>	

Size variation

This component can be changed based on the required size. There are 7 different size variations and these can be acheived by added the ` .avatar-* ` and define a size.

The following is an example using the avatar's in different size variations. Always remember, the size variation you need to use on your website or web application must be govered by the design and user experience the project needs to delivery.

By default, the recommended size to use on a general level is ` .avatar-base `

• Visual UI
• HTML code

<div class="aegov-avatar avatar-xs">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar avatar-sm">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar avatar-lg">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar avatar-xl">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar avatar-2xl">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>
<div class="aegov-avatar avatar-3xl">
	<img src="/img/user-thumbnail-01.jpg" alt="person name">
</div>

Avatar with indicator

This variation adds a small dot indicator to the avatar, representing the user's status or other relevant information. You may use this to indicate a user's online status or to indicate a notification attached to their profile.

This is acheived by adding an ` .alert-indicator ` class to a <span> tag after the image, and then adding the indicator color, followed by a ring class to match the background color where you want to place the avatar.

In the example below, we have used the white color for the ring as the background color where the avatar is placed is white. We have also used a red and green indicator as an example.

The size of the indicator will increase with the variation of size applied on the avatar.

• Visual UI
• HTML code

<div class="aegov-avatar">
	<img src="/img/user-thumbnail-01.jpg" alt="User Avatar">
	<span class="alert-indicator bg-aered-500 ring-whitely-50"></span>
</div>
<div class="aegov-avatar avatar-rounded">
	<img src="/img/user-thumbnail-01.jpg" alt="User Avatar">
	<span class="alert-indicator bg-aegreen-500 ring-whitely-50"></span>
</div>

Placeholder avatars when no image is added

` .no-user ` is the class to add when there is no image added by a user. This is optional, but recommended to use after a backend check is performed if a user image exists.

It is also recommended to use this class against adding another image. If you are using a service such as Gravatar, you may ignore using this class.

• Visual UI
• HTML code

<div class="aegov-avatar">
	<img class="no-user" src="" alt="Image Not Found">
</div>
<div class="aegov-avatar avatar-rounded">
	<img class="no-user" src="" alt="Image Not Found">
</div>

Accessibility

Since the avatar is a visual representation of a user, accessibility must be considered to give context to the image. By adhering to accessibility best practices, you can create an inclusive and user-friendly component that caters to all users.

• Always add ` alt="" ` as an attribute to the image and specefiy the name of the user. The alt text should convey the purpose of the avatar, allowing users with visual impairments to understand its content.
• Although not a requirement, you may add the ` role="img" ` to the encapsulating container. This adds an added indicator that the purpose of the HTML tag is that of an image.

Indicator state

It is always advisable to add an indicator state within your web application that can help identify if a certain user is online.

Remember, you do not need to use the avatar component to only identify the current user. You may also use this to identify other users. For example, you may use this component to show a list of users who are available to chat and provide support. Those user's may be permanent in nature, and the indicator can provide additional context of their state.

• Define the state of a user with the indicator.
• The color may be used to add more context, such as pending notifications.
• When defining the state, make sure to add the ` aria-label="" ` attribute and add the text related to the state.

Where to use an avatar?

After authentication, you may display the user's profile image as their avatar and use this to indicate their state or as a call-to-action for their account settings and profile information.

Once you authenticate a user with UAE Pass, the resulting data will provide you with user information such as the name, email address and unique ID of the user, however, there will be no default image of the user provide.

Creating, storing and managing the avatar of a user is the responsibility of the entity. It should be the choice of the user if they want to submit an image as their primary profile image to the entity. The entity must provide the ability to add, change and remove a profile image for an authenticated user.

Spacing

Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards an avatar.

• Always wrap an avatar in the default class and this will ensure the size is accurate. It is essentially to alway keep the height and width of an avatar the same.
• If the avatar is placed near other components, ensure there is margin of 1 rem between the avatar and other components.
• Vertical margin is optional, however recommended to for the avatar.