# Avatar

> Foto o iniciales de una persona: tamaños, indicador de estado, grupos y con nombre.

Categoría: Contenido · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Junto al nombre de una persona, en listas, comentarios y el menú de usuario.
- Para empresas, el logo de la empresa o el ícono de edificio, no iniciales.
- Sin colores por persona: el nombre es lo que identifica.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><span role="img" aria-label="Foto de perfil" class="ph inline-block shrink-0 rounded-full w-10 h-10"></span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span></div>
```

## Tamaños

```html
<div class="flex flex-wrap items-start justify-center gap-8"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-6 h-6 text-xs ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-12 h-12 text-base ">CR</span></div>
```

## Con indicador

```html
<div class="flex flex-wrap items-start justify-center gap-8"><span class="relative inline-flex"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span><span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-ccs-green ring-2 ring-white dark:ring-ccs-dark-bg" aria-hidden="true"></span></span><span class="relative inline-flex"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">MP</span><span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-ccs-line-strong dark:bg-ccs-dark-line-strong ring-2 ring-white dark:ring-ccs-dark-bg" aria-hidden="true"></span></span><span class="relative inline-flex"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">EM</span><span class="absolute -bottom-0.5 -right-0.5 grid place-items-center w-4 h-4 rounded-full bg-ccs-blue text-white ring-2 ring-white dark:bg-ccs-blue-mid dark:ring-ccs-dark-bg" aria-hidden="true"><iconify-icon icon="ph:check-bold" class="shrink-0 text-[12px] " aria-hidden="true"></iconify-icon></span></span></div>
```

## Grupo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex -space-x-2"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">MP</span><span role="img" aria-label="Foto de perfil" class="ph inline-block shrink-0 rounded-full w-10 h-10 ring-2 ring-white dark:ring-ccs-dark-bg"></span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">JS</span></div></div>
```

## Grupo con contador

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex -space-x-2"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ring-2 ring-white dark:ring-ccs-dark-bg ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ring-2 ring-white dark:ring-ccs-dark-bg ">MP</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ring-2 ring-white dark:ring-ccs-dark-bg ">JS</span><span class="inline-flex w-8 h-8 items-center justify-center rounded-full bg-ccs-bg text-xs font-medium ring-2 ring-white border border-ccs-line dark:border-ccs-dark-line text-ccs-slate dark:text-ccs-dark-text-2 dark:bg-ccs-dark-surface dark:ring-ccs-dark-bg">+5</span></div></div>
```

## Grupo con acción

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex -space-x-2"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ring-2 ring-white dark:ring-ccs-dark-bg ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-8 h-8 text-xs ring-2 ring-white dark:ring-ccs-dark-bg ">MP</span><button type="button" aria-label="Agregar persona" class="relative inline-grid w-8 h-8 place-items-center rounded-full bg-ccs-bg ring-2 ring-white border border-dashed border-ccs-line-strong hover:border-ccs-blue hover:text-ccs-blue dark:bg-ccs-dark-surface dark:ring-ccs-dark-bg dark:border-ccs-dark-line-strong text-ccs-slate dark:text-ccs-dark-text-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:add-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Con nombre

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center gap-3"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span><div><div class="text-sm font-semibold">Carolina Rojas</div><div class="text-xs text-ccs-slate dark:text-ccs-dark-text-2">Jefa de ventas, Empresa de Ejemplo</div></div></div></div>
```

## Guía: Accesibilidad

Si el nombre está al lado, el avatar es decorativo: alt="" o aria-hidden. Si va solo, la foto lleva el nombre en alt. Un indicador de estado no se comunica solo con color: el texto "En línea" va en la ficha o en un sr-only.