0.0.4

Avatar

A pure vanilla JS implementation of Zag JS Avatar Opens in a new window

Anatomy

The Avatar component consists of the following data-part

root fallback image
C
N
CX 
<div>
                  <div class="avatar avatar-js">
                  <div data-part="root">
                  <span data-part="fallback">C</span>
                  <img data-part="image" alt="Corex HTML" src="/images/corex.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js">
                  <div data-part="root">
                  <span data-part="fallback">N</span>
                  <img data-part="image" alt="Netoum" src="/images/avatar.png">
                  </div>
                  </div>
                  <div class="avatar avatar-js">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Modifier

Each avatar can be styled with modifiers.

You can mix as many modifiers on the same avatar, however you can choose only one choice per modifer

For convenience the default variant name is omited, meaning there is no need to add the default name class

Modifier Option Description
Variant neutral (default), accent Used for different types of meanings
Color base (default), brand, alert Use any semantic colors
Font Color base (default), brand, alert Use any semantic colors.
Size md (default), sm, lg, xl Modify the size of the avatar.

Variant

Set the variant of each avatar

Options: neutral(default), accent

CX
CX 
<div>
                  <div class="avatar avatar-js avatar--accent">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/images/corex.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js  avatar--accent">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Color

Set the color of each avatar

Options: base(default), brand, alert

CX
CX
CX
CX 
<div>
                  <div class="avatar avatar-js  avatar--brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js  avatar--alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Font Color

Set the font color of each avatar

Options: base(default), brand, alert

CX
CX
CX
CX 
<div>
                  <div class="avatar avatar-js  avatar--font-brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js  avatar--font-alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--font-brand">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--accent avatar--font-alert">
                  <div data-part="root">
                  <span data-part="fallback">CX</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Size

Set the size of each avatar

Options: md(default), sm, lg, xl

SM
MD
LG
XL 
<div>
                  <div class="avatar avatar-js  avatar--sm">
                  <div data-part="root">
                  <span data-part="fallback">SM</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js">
                  <div data-part="root">
                  <span data-part="fallback">MD</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--lg">
                  <div data-part="root">
                  <span data-part="fallback">LG</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js avatar--xl">
                  <div data-part="root">
                  <span data-part="fallback">XL</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

RTL

RTL support for button with icon

كس
كس 
<div dir="rtl">
                  <div class="avatar avatar-js" data-dir="rtl">
                  <div data-part="root">
                  <span data-part="fallback">كس</span>
                  <img data-part="image" alt="Corex HTML" src="/images/corex.svg">
                  </div>
                  </div>
                  <div class="avatar avatar-js" data-dir="rtl">
                  <div data-part="root">
                  <span data-part="fallback">كس</span>
                  <img data-part="image" alt="Corex HTML" src="/corex_not_found.svg">
                  </div>
                  </div>
                  </div>

Templates

Avatar components is available in the followng templates

Accordion Badge