Avatar

AM
MF
<.avatar id="avatar-basic-default" name="Asmit Malakannawar"/>
<.avatar
  id="avatar-basic-with-image"
  name="Marek Fořt"
  image_href="https://www.gravatar.com/avatar/292c129cf17a552c08b4d9dcf2c6c1f8"
/>
<.avatar
  id="avatar-basic-with-placeholder"
  name="Marek Fořt"
  fallback="placeholder"
  image_href="https://www.invalid.url"
/>
A
AM
AM
AM
AM
AM
<.avatar
  id="avatar-sizes-size-2xsmall"
  name="Asmit Malakannawar"
  size="2xsmall"
  color="gray"
/>
<.avatar
  id="avatar-sizes-size-small"
  name="Asmit Malakannawar"
  size="small"
  color="orange"
/>
<.avatar
  id="avatar-sizes-size-medium"
  name="Asmit Malakannawar"
  size="medium"
  color="yellow"
/>
<.avatar
  id="avatar-sizes-size-large"
  name="Asmit Malakannawar"
  size="large"
  color="azure"
/>
<.avatar
  id="avatar-sizes-size-xlarge"
  name="Asmit Malakannawar"
  size="xlarge"
  color="blue"
/>
<.avatar
  id="avatar-sizes-size-2xlarge"
  name="Asmit Malakannawar"
  size="2xlarge"
  color="purple"
/>
JD
JS
BJ
AB
CD
EW
FM
GT
<.avatar id="avatar-colors-color-gray" name="John Doe" color="gray"/>
<.avatar id="avatar-colors-color-red" name="Jane Smith" color="red"/>
<.avatar id="avatar-colors-color-orange" name="Bob Johnson" color="orange"/>
<.avatar id="avatar-colors-color-yellow" name="Alice Brown" color="yellow"/>
<.avatar id="avatar-colors-color-azure" name="Charlie Davis" color="azure"/>
<.avatar id="avatar-colors-color-blue" name="Emma Wilson" color="blue"/>
<.avatar id="avatar-colors-color-purple" name="Frank Miller" color="purple"/>
<.avatar id="avatar-colors-color-pink" name="Grace Taylor" color="pink"/>
M
MJ
AM
JD
JG
FI
<.avatar id="avatar-edge-cases-single-name" name="Madonna" color="purple"/>
<.avatar id="avatar-edge-cases-three-names" name="Mary Jane Watson" color="red"/>
<.avatar id="avatar-edge-cases-hyphenated-name" name="Anne-Marie Johnson" color="blue"/>
<.avatar id="avatar-edge-cases-with-underscore" name="john_doe_123" color="gray"/>
<.avatar id="avatar-edge-cases-special-characters" name="José García" color="orange"/>
<.avatar
  id="avatar-edge-cases-empty-image-initials"
  name="Failed Image Test"
  fallback="initials"
  image_href=""
/>