Commentary

The avatar is an image that represents the user’s identity on screen. The avatar is a small object that has great power to help connect the user to the application or user to user relationships. Avatars simplify the process of interaction and communication. They also save screen space producing less visual clutter. Avatars improve comprehension allowing users to rely on images instead of text labels to identify a person. Adapted from Spectre CSS - avatars.

The .avatar element modifier structures a user profile image to be displayed as a circle cropped image. Five sizes are available ranging from 1x to 5x the base font size:

  • avatar-xl (5rem);
  • avatar-lg (4rem);
  • avatar-nm (3rem);
  • avatar-sm (2rem);
  • avatar-xs (1rem).

Three "presence" indicators are also available for real-time indication of the state of a user. For users who don't have profile pictures, use their initials for avatars. The data-initials attribute provides the initials to show inside the avatar.

Usage

Classes:
.avatar Defines a figure HTML tag that holds a user profile image.
data-initials Optional attribute that holds a user's initials if no image is available.
Size options: .avatar-xs, .avatar-sm, .avatar-nm, .avatar-lg, .avatar-xl
Presence modifiers: .avatar-presence-online, .avatar-presence-busy, .avatar-presence-away
Dependencies:
File: avatar.css
Variables: --base-font-size, --bg-main, --danger, --grey-light, --secondary, --success, --warning

Examples

Avatar with Options

Avatar LG One
Avatar LG Two 

                <figure class="avatar avatar-lg">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man2.png" alt="Avatar LG One">
                </figure>

                <figure class="avatar avatar-lg avatar-presence-online">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman1.png" alt="Avatar LG Two">
                </figure>

                <figure class="avatar avatar-lg avatar-presence-online" data-initials="YZ">
                    <div></div>
                </figure>

Avatar Sizes

Avatar XL
Avatar Normal
Avatar SM
Avatar XS 

                <figure class="avatar avatar-xl avatar-presence-busy">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman1.png" alt="Avatar XL">
                </figure>

                <figure class="avatar avatar-lg avatar-presence-online" data-initials="YZ">
                    <div></div>
                </figure>

                <figure class="avatar avatar-nm avatar-presence-away">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man2.png" alt="Avatar Normal">
                </figure>

                <figure class="avatar avatar-sm">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman3.png" alt="Avatar SM">
                </figure>

                <figure class="avatar avatar-xs">
                    <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man2.png" alt="Avatar XS">
                </figure>