Avatar

Avatar description.

With UnoCSS

Usage

Basic

<div avatar>
  <div rounded>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>
<div avatar>
  <div rounded-full>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>

Sizes

<div avatar="~ sm"> // xs | sm | md | lg
  <div rounded>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>
<div avatar w-24> // Custom size
  <div rounded>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>

Clip

<div avatar mask-hexagon> // mask-squircle | mask-triangle | mask-hexagon
  <img src="https://www.github.com/zyyv.png">
</div>

With Status

Provide avatar-online and avatar-offline to show the status.

<div avatar="~ online">
  <div rounded-full>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>
<div avatar="~ offline">
  <div rounded-full>
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>
<div avatar="~ theme-200 dark:theme-800">
  <div rounded-full ring="~ context">
    <img src="https://www.github.com/zyyv.png">
  </div>
</div>

Group

Use avatar-group to group multiple avatars.

<div avatar-group space-x--6>
  <div avatar>
    <div rounded-full>
      <img src="https://www.github.com/zyyv.png">
    </div>
  </div>
  <div avatar>
    <div rounded-full>
      <img src="https://www.github.com/zyyv.png">
    </div>
  </div>
  <div avatar>
    <div rounded-full>
      <img src="https://www.github.com/zyyv.png">
    </div>
  </div>
  <div avatar avatar-placeholder>
    <div rounded-full>
      <span>+99</span>
    </div>
  </div>
</div>

+99

With Vue

TODO