COMPONENTS

Avatars

One avatar class supports an image or explicit initials. Size, shape, borders and colours follow shared parent defaults.

Usage

Markup: .avatar on img or an initials span

Behaviour: Failed-image replacement must be supplied by the application.

Use meaningful alt text when the image identifies a person. Use alt="" when a nearby visible name already gives the same information.
For standalone initials, supply the full name through an accessible label. Initials are not an automatic image-loading fallback; your application or server chooses which markup to render.
data-shape="pill" makes the square avatar round. Use --re-avatar-size for a custom base dimension; data-size scales it. Set attributes on a parent for shared defaults.
Constrained avatars keep a square aspect ratio as their available width decreases. Shape changes the boundary, not the aspect ratio.

Component API and styling module · Inherited appearance settings

Initials with a full name

The visible name gives context, so the initials are decorative.

Revaz Eristavi

<div class="row" data-shape="pill">
  <span class="avatar" aria-hidden="true">RE</span>
  <span>Revaz Eristavi</span>
</div>

Image markup

This documentation illustration demonstrates cropping. Replace the source with a real profile image.

Example profile

<div class="row" data-shape="pill">
  <img class="avatar" src="/RevaCSS/images/example-landscape.svg"
       width="44" height="44" alt="">
  <span>Example profile</span>
</div>

Inherited sizes and shapes

Each parent supplies a size. A full accessible name accompanies standalone initials.

<div class="row" data-shape="pill">
  <section data-size="small"><span class="avatar" role="img" aria-label="Alex Morgan">AM</span></section>
  <section data-size="medium"><span class="avatar" role="img" aria-label="Jamie Lee">JL</span></section>
  <section data-size="large"><span class="avatar" role="img" aria-label="Sam Taylor">ST</span></section>
</div>