Skip to content

Components

Avatar

Image

html
<div class="avatar">
  <img src="https://picsum.photos/100" />
</div>

Letter

LE
TT
ER
html
<div class="avatar">OP</div>

Icon

html
<div class="avatar">
  <svg></svg>
</div>

Variants

SQ
html
<div class="avatar squared">SQ</div>

<div class="avatar rounded"><img /></div>

Grouped

KLIJ
CD
AB
html
<div class="avatar-group">
  <div class="avatar">CD</div>
  <div class="avatar">AB</div>
</div>

Spacing

KLIJ
CD
AB
KLIJ
CD
AB
NOIJ
CD
AB
html
<div class="avatar-group">
  <!--  -->
</div>

<div class="avatar-group gap-small">
  <!--  -->
</div>

<div class="avatar-group gap-x-small">
  <!--  -->
</div>

API

TypeModifiersDefaultDescription
Anatomy& > summary, & > .content, & > .actions-Optional wrappers for child content.
Variantsdefault, .squared, .roundeddefaultThe variant to use.

Avatar group

TypeModifiersDefaultDescription
ChildrenAvatarAvatarChildren
Spacingdefault, .gap-small, .gap-x-smalldefaultThe size to use.

Installation

css
@layer components.base {
  :where(.avatar) {
    --_bg-color: var(--color-8);
    --_color: var(--text-color-1);
    --_width: 40px;

    align-items: center;
    background-color: var(--_bg-color);
    color: var(--_color);
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: inline-flex;
    inline-size: var(--_width);
    justify-content: center;
    overflow: clip;
    position: relative;
    text-align: center;
    text-decoration: none;

    &:has(img) {
      background-color: transparent;
    }

    svg {
      max-inline-size: var(--size-5);
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
    }

    &.squared {
      border-radius: 0;
    }

    &.rounded {
      border-radius: var(--border-size-3);
    }
  }

  /*
  TODO: implement reading-order if that becomes a thing.
  https://developer.chrome.com/blog/reading-order/
  */
  :where(.avatar-group) {
    --_margin: var(--size-1);

    display: flex;
    flex-direction: row-reverse;

    &.gap-small {
      --_margin: var(--size-2);
    }

    &.gap-x-small {
      --_margin: var(--size-3);
    }

    .avatar {
      margin-inline-end: calc(-1 * var(--_margin));
      outline: 2px solid var(--surface-default);
    }
  }
}