Avatar

Representa a una persona usuaria en tres variantes — --initials, sin modificador para --image (recibe la foto como <img> hijo, sin modificador propio) y --icon — más tres tamaños discrecionales: --l (36px, default), --xl (48px) y --2xl (64px).

Iniciales

<span class="cl-avatar cl-avatar--initials" aria-hidden="true">AP</span>

Ícono

<span class="cl-avatar cl-avatar--icon">
  <span class="cl-avatar__icon cl-icon" data-icon="fingerprint" aria-hidden="true"></span>
</span>

Imagen

<span class="cl-avatar">
  <img src="/images/home/logo-pacifico.png" alt="Nombre de la persona usuaria" />
</span>

Tamaños

<span class="cl-avatar cl-avatar--initials" aria-hidden="true">AP</span>
<span class="cl-avatar cl-avatar--initials cl-avatar--xl" aria-hidden="true">AP</span>
<span class="cl-avatar cl-avatar--initials cl-avatar--2xl" aria-hidden="true">AP</span>

• Usa --initials cuando conoces el nombre de la persona pero no tienes una foto: dos letras, iniciales de nombre y apellido, marcadas aria-hidden="true" porque el nombre real debe estar en el texto visible junto al avatar (no depende del avatar para transmitir la identidad).
• Usa --image (sin modificador) cuando hay una foto real disponible; el <img> hijo debe llevar alt con el nombre de la persona.
• Usa --icon como resguardo genérico cuando no hay nombre ni foto.
• Elige el tamaño según la densidad del contexto: --l por defecto, --xl/--2xl para cabeceras de perfil o tarjetas destacadas.

• La variante --initials/--icon es puramente decorativa (aria-hidden="true"): la identificación de la persona debe estar en un texto visible cercano, no solo en el avatar.
• La variante --image requiere alt descriptivo en el <img> (nombre de la persona), no alt="".