Version
has been released! Read the upgrade guide

Avatar

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

Avatars are simple UI elements that display a user's initials.

1Usage

The Avatar component can either be displayed statically, or as a link. The Avatar can be used to provide navigation to a user's profile, or to associate a user with a particular set of data.

2Anatomy

  1. Container The Container wraps the component.

  2. Initials A user's initials are displayed in the centre of the component.

3Sizing & Spacing

The Avatar component is available in 1 standard size.

4States

The Avatar has 2 states - default and hover.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright