Avatares
Iniciales sobre un fondo de marca. Tres tamaños y una versión suave para filas de tabla.
Tamaños y variantes
ML
ML
ML
ML
LR
CR
JH
<span class="mr-av mr-av-lg" title="María López">ML</span>
<span class="mr-av mr-av-md" title="María López">ML</span>
<span class="mr-av mr-av-sm" title="María López">ML</span>
<span class="mr-av mr-av-md mr-av-soft" title="María López">ML</span>
<span class="mr-av-stack">
<span class="mr-av mr-av-sm" title="Laura Ramírez">LR</span>
<span class="mr-av mr-av-sm mr-av-soft" title="Carlos Rivas">CR</span>
<span class="mr-av mr-av-sm" title="Jorge Hernández">JH</span>
</span>
Iniciales exactas
Con nombre y apellido por separado, pasa initials. Sin él, con tres o más palabras se usa la primera y la penúltima (se asume nombre + dos apellidos).
JS
JS
ML
<x-maristas::avatar :name="$lead->nombre_completo" :initials="mb_substr($lead->nombre, 0, 1).mb_substr($lead->apellido_paterno, 0, 1)" />
Sí
El avatar de una persona es siempre el azul fuerte (el degradado): es el mismo en la lista, en el detalle y en los paneles, así se reconoce a la persona en toda la aplicación.
No
No uses la variante clara (soft) para representar a una persona que también aparece con el azul fuerte en otra pantalla. Reserva soft para contextos decorativos donde no haya otra versión.