Avatar

<Avatar size='4rem' src='/img/avatar01.jpg' alt='Avatar of xxxx'/>

<Frame ar='1/1' w='4em' h='auto' bdrs='99'>
  <Media src='/img/avatar01.jpg' alt='Avatar of xxxx' width='100%' height='100%' decoding='async' />
</Frame>

<div class="l--frame -ar:1/1 -w: -h:a -bdrs:99" style="--w:4rem">
  <img src="/img/avatar01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async">
</div>

 import Avatar from '@/components/lism/Avatar/index.jsx'; 

 import Avatar from '@/components/lism/Avatar/index.astro'; 

<Avatar size='5rem' src='/img/avatar01.jpg' alt='Avatar of xxxx' bd bdw='3px' bdc='blue' bxsh='2'/>

<div class="c--avatar l--frame -ar:1/1 -w: -h:a -bdrs:99 -bd: -bxsh:2" style="--w:5rem;--bdw:3px;--bdc:var(--blue)">
  <img src="/img/avatar01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async">
</div>