Avatar

a user or tenant mark, image or initials, at four scales with optional labels.

Example

DC
Diego Cancho
AL
Ada Lovelace
GH
Grace HopperAcme
<div class="lucent-avatar lucent-avatar--sm lucent-avatar--trailing">
  <div class="lucent-avatar__circle">
    <span class="lucent-avatar__initials">DC</span>
  </div>
  <div class="lucent-avatar__labels">
    <span class="lucent-avatar__name">Diego Cancho</span>
  </div>
</div>
<div class="lucent-avatar lucent-avatar--md lucent-avatar--trailing">
  <div class="lucent-avatar__circle">
    <span class="lucent-avatar__initials">AL</span>
  </div>
  <div class="lucent-avatar__labels">
    <span class="lucent-avatar__name">Ada Lovelace</span>
  </div>
</div>
<div class="lucent-avatar lucent-avatar--lg lucent-avatar--trailing">
  <div class="lucent-avatar__circle">
    <span class="lucent-avatar__initials">GH</span>
  </div>
  <div class="lucent-avatar__labels">
    <span class="lucent-avatar__name">Grace Hopper</span>
    <span class="lucent-avatar__tenant">Acme</span>
  </div>
</div>

Playground

AL
Ada LovelaceAcme
scale
variant 
 
 
 
Using it
 
 
  
 Angular  lucent-avatar 
import { LucentAvatar } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-avatar 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 src input string '' image url; falls back to initials. 
 name input string '' used for initials and the label. 
 tenant input string '' secondary label (md and lg). 
 scale input xs | sm | md | lg md size. 
 variant input trailing | leading | none trailing label placement. 
  
 
  
Theming
 
 
 
Color (3)
  
 
Size & spacing (7)
  
 
Border & radius (1)
  
 
Type (5)