Avatar

🚧 WORK IN PROGRESS: Used to show a thumbnail representation of an individual or business in the interface. 🚧

Class name	Type
`.prs-avatar`	Component	Container
`.prs-avatar-xs`	Modifier	Extra-Small variant
`.prs-avatar-sm`	Modifier	Small variant
`.prs-avatar-md`	Modifier	Medium variant
`.prs-avatar-lg`	Modifier	Large variant
`.prs-avatar-xl`	Modifier	Extra-Large variant
`.prs-avatar-2xl`	Modifier	2x Extra-Large variant
`.prs-avatar-offline`	Modifier	Offline gray dot variant
`.prs-avatar-online`	Modifier	Online green dot variant
`.prs-avatar-placeholder`	Part	For text

Examples

<!-- image -->
<div class="prs-avatar"><img src="https://placehold.net/4.png" alt="Avatar component" /></div>

<!-- person svg -->
<div class="prs-avatar"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#collab-person" /></svg></div>

<!-- text/initials -->
<div class="prs-avatar"><span class="prs-avatar-placeholder">WW</span></div>

Sizes

<div class="prs-avatar prs-avatar-2xl"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar prs-avatar-xl"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar prs-avatar-lg"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar prs-avatar-md"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar prs-avatar-sm"><span class="prs-avatar-placeholder">WW</span></div>
<div class="prs-avatar prs-avatar-xs"><span class="prs-avatar-placeholder">WW</span></div>

Status

For displaying offline/online status.

<!-- offline -->
<div class="prs-avatar prs-avatar-lg prs-avatar-offline"><img src="https://placehold.net/5.png" alt="Avatar component" /></div>

<!-- online -->
<div class="prs-avatar prs-avatar-lg prs-avatar-online"><img src="https://placehold.net/4.png" alt="Avatar component" /></div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-avatar {
  width: 3.125rem;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
  display: inline-flex;
  position: relative;
  & :where(img,svg,.prs-avatar-placeholder) {
    width: 100%;
    height: 100%;
    background-color: var(--prs-c-gray-300);
    color: var(--prs-c-gray-900);
    font-weight: 700;
    letter-spacing: -1px;
    border-radius: calc(infinity * 1px);
    &:where(svg) {
      padding: 0.25rem;
      color: var(--prs-c-gray);
    }
    &:where(.prs-avatar-placeholder) {
      font-size: 1.25rem;
      overflow: hidden;
    }
  }
}
.prs-avatar-2xl {
  width: 5rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 2rem;
  }
}
.prs-avatar-xl {
  width: 4.375rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 1.75rem;
  }
}
.prs-avatar-lg {
  width: 3.75rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 1.5rem;
  }
}
.prs-avatar-md {
  width: 2.5rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 1rem;
  }
}
.prs-avatar-sm {
  width: 1.875rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 0.725rem;
  }
}
.prs-avatar-xs {
  width: 1.25rem;
  & :where(.prs-avatar-placeholder) {
    font-size: 0.5625rem;
  }
}
.prs-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prs-avatar-online,.prs-avatar-offline {
  &:before {
    width: 15%;
    height: 15%;
    background-color: var(--prs-c-success-600);
    display: block;
    outline: 2px solid var(--prs-c-white);
    position: absolute;
    top: 7%;
    right: 7%;
    z-index: 1;
    content: "";
    border-radius: calc(infinity * 1px);
  }
}
.prs-avatar-offline {
  &:before {
    background-color: var(--prs-c-gray-200);
  }
}

Coming soon...