Avatar - JS + CSS

Avatar

Struktur HTML


<div class="ina-avatar ina-avatar--32 ina-avatar--circle">AB</div>

Contoh Penggunaan

Contoh 1

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3">
    <div class="ina-avatar ina-avatar--16 ina-avatar--circle">AB</div>
    <div class="ina-avatar ina-avatar--24 ina-avatar--circle">CD</div>
    <div class="ina-avatar ina-avatar--32 ina-avatar--circle">EF</div>
    <div class="ina-avatar ina-avatar--40 ina-avatar--circle">GH</div>
    <div class="ina-avatar ina-avatar--48 ina-avatar--circle">IJ</div>
  </div>
  <div class="flex items-center gap-3">
    <div class="ina-avatar ina-avatar--32 ina-avatar--circle">AB</div>
    <div class="ina-avatar ina-avatar--32 ina-avatar--square">CD</div>
  </div>
</div>

Contoh 2

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3">
    <img
      src={avatarImage}
      alt="User 1"
      class="ina-avatar ina-avatar--32 ina-avatar--circle ina-avatar--image"
    />
    <img
      src={avatarImage}
      alt="User 2"
      class="ina-avatar ina-avatar--40 ina-avatar--circle ina-avatar--image"
    />
    <img
      src={avatarImage}
      alt="User 3"
      class="ina-avatar ina-avatar--48 ina-avatar--circle ina-avatar--image"
    />
  </div>
  <div class="flex items-center gap-3">
    <div class="ina-avatar ina-avatar--32 ina-avatar--circle">JD</div>
    <div class="ina-avatar ina-avatar--40 ina-avatar--circle">SM</div>
    <div class="ina-avatar ina-avatar--48 ina-avatar--circle">AB</div>
  </div>
</div>