Avatar

Avatar muestra a clientes, mecánicos y conductores. Si no hay foto, usa las iniciales con un tinte estable según el nombre.

Mantención 10.000 km

Tu mecánico

Mecánico

Diego Riquelme

4,9 · 312 servicios

En camino
+2.400 clientes

Nos califican con 4,9

Tamaños

xs
sm
md
lg
xl
xs, sm, md, lg y xlmd es el tamaño estándar. xs y sm para grupos y filas densas, lg y xl para perfiles.

Foto e iniciales

name es obligatorio. Se usa como texto alternativo y para las iniciales cuando no hay foto o la persona no la ha subido.

Con src, la foto se recorta en círculo y llena todo el contenedor.

InicialesSin foto, muestra nombre y apellido. El tinte sale del nombre y siempre es el mismo.

Uso

Diego Riquelme

Mecánico

Camila Soto

Mecánico

Matías González

Mecánico

Sí
Un solo tamaño dentro de una misma lista.
Diego Riquelme

Mecánico

Camila Soto

Mecánico

Matías González

Mecánico

No
Tamaños mezclados. La lista pierde ritmo y parece desordenada.

Mecánico

Diego Riquelme

4,9 · 312 servicios

En camino
Sí
Avatar solo para personas.
No
Marcas, talleres o autos. Para eso usa Logo o una imagen del auto.

Código

import { Avatar } from '@carvuk/design-system/components/avatar';

<Avatar name='Diego Riquelme' src={photoUrl} size='lg' />
<Avatar name='Camila Soto' />