• Components
  • Avatar

Avatar

Text alt 
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192' })
@jrmc.avatar()
  <img src="https://picsum.photos/id/64/192/192" alt="Text alt" />
@end
<div class="avatar " >
    <div class="w-24">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-24">
        <img src="https://picsum.photos/id/64/192/192" alt="Text alt" />
    </div>
</div>

Avatar size 

@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-32 rounded' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-20 rounded' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-16 rounded' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-8 rounded' })
<div class="avatar " >
    <div class="w-32 rounded">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-20 rounded">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-16 rounded">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-8 rounded">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>

Avatar rounded 

@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 rounded-xl' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 rounded-full' })
<div class="avatar " >
    <div class="w-24 rounded-xl">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-24 rounded-full">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>

Avatar mask 

@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-squircle' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-hexagon' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-triangle' })
<div class="avatar " >
    <div class="w-24 mask mask-squircle">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-24 mask mask-hexagon">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-24 mask mask-triangle">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>

Avatar group 

@jrmc.avatar.group()
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192', class: 'w-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/338/192/192', class: 'w-12' })
@end
<div class="avatar-group -space-x-6">
  <div class="avatar " >
    <div class="w-12">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-12">
      <img src="https://picsum.photos/id/65/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-12">
      <img src="https://picsum.photos/id/338/192/192" alt="" />
    </div>
</div>
</div>

Avatar group2

+99 
@jrmc.avatar.group({ class: '-space-x-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192' })
  @!jrmc.avatar({ placeholder: '+99' })
@end
<div class="avatar-group -space-x-12">
  <div class="avatar " >
    <div class="w-24">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar " >
    <div class="w-24">
      <img src="https://picsum.photos/id/65/192/192" alt="" />
    </div>
</div>
<div class="avatar  placeholder" placeholder="+99">
    <div class="w-24 bg-neutral-content text-neutral">
      <span>+99</span>
    </div>
</div>
</div>

Avatar ring 

@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: ['w-24', 'rounded-full', 'ring', 'ring-primary', 'ring-offset-base-100', 'ring-offset-2'] })
<div class="avatar " >
    <div class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>

Avatar status 

@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', status: 'online', class: 'w-24 rounded-full' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', status: 'offline', class: 'w-24 rounded-full' })
<div class="avatar online " status="online">
    <div class="w-24 rounded-full">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar offline " status="offline">
    <div class="w-24 rounded-full">
      <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>

Avatar placeholder

K
JO
AA 
@!jrmc.avatar({ placeholder: 'K' })
@!jrmc.avatar({ placeholder: 'JO', status: 'online', class: ['bg-neutral', 'text-neutral-content', 'rounded-full', 'w-16'] })
@!jrmc.avatar({ placeholder: 'AA', class: ['bg-primary', 'text-neutral-content', 'mask', 'mask-hexagon', 'w-8'] })
<div class="avatar  placeholder" placeholder="K">
    <div class="w-24 bg-neutral-content text-neutral">
      <span>K</span>
    </div>
</div>
<div class="avatar online  placeholder" placeholder="JO" status="online">
    <div class="bg-neutral text-neutral-content rounded-full w-16">
      <span>JO</span>
    </div>
</div>
<div class="avatar  placeholder" placeholder="AA">
    <div class="bg-primary text-neutral-content mask mask-hexagon w-8">
      <span>AA</span>
    </div>
</div>