Avatar CSS Tailwind solo CSS para imágenes de perfil. Tallas xs-xl, apilamiento de grupos e indicador de estado en línea/fuera de línea. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de Avatar muestran imágenes de perfil de usuario o iniciales en un contenedor compacto y personalizable. Creados con las propiedades personalizadas CSS de Frutjam, los avatares representan usuarios, contribuyentes o miembros del equipo en su interfaz. El sistema de avatar admite imágenes y texto, múltiples tamaños, colores, formas, indicadores de estado, anillos y disposiciones de grupo, ideal para listas de usuarios, comentarios, presentaciones de equipos, secciones de perfil e interfaces de mensajería.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| avatar | Base | Contenedor de avatar circular con iniciales o imagen. |
| avatar-group | Modificador | Pila superpuesta de múltiples avatares |
| avatar-ring | Modificador | Agrega un borde de anillo de color alrededor del avatar. |
| avatar-circle | Estilo | Forma completamente circular (predeterminada) |
| avatar-rounded | Estilo | Forma de rectángulo redondeado |
| avatar-square | Estilo | Forma cuadrada sin redondeos. |
| avatar-online | Estilo | Indicador verde de estado en línea |
| avatar-away | Estilo | Indicador amarillo de estado ausente |
| avatar-busy | Estilo | Indicador rojo de estado ocupado |
| avatar-offline | Estilo | Indicador gris de estado fuera de línea |
| avatar-xs | Tamaño | extrapequeño |
| avatar-sm | Tamaño | Pequeño |
| avatar-md | Tamaño | Medio (predeterminado) |
| avatar-lg | Tamaño | Grande |
| avatar-xl | Tamaño | Extra grande |
| avatar-2xl | Tamaño | 2x extra grandes |
| avatar-primary | Color | Color del tema principal |
| avatar-secondary | Color | Color del tema secundario |
| avatar-accent | Color | Color del tema de acento |
| avatar-neutral | Color | Color de tema neutro |
| avatar-info | Color | Color semántico de información |
| avatar-success | Color | Color semántico del éxito |
| avatar-warning | Color | Color semántico de advertencia |
| avatar-error | Color | Color semántico del error |
| avatar-ring-primary | Color | Anillo en color primario |
| avatar-ring-secondary | Color | Anillo en color secundario |
| avatar-ring-accent | Color | Anillo en color de acento |
| avatar-ring-neutral | Color | Anillo en color neutro |
| avatar-ring-info | Color | Anillo en color info |
| avatar-ring-success | Color | Anillo en color éxito |
| avatar-ring-warning | Color | Anillo en color de advertencia. |
| avatar-ring-error | Color | Anillo en color de error |
Uso básico
Crea avatares simples con iniciales de texto o colores.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar con imágenes
Muestre fotos de perfil de usuario con ajuste automático de imagen y tamaño responsivo.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Tamaños de avatares
Utilice variantes de tamaño para escalar avatares desde extrapequeño (xs) hasta 2x-grande (2xl) para diferentes contextos.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Colores de avatar
Aplique variantes de color para diferenciar los avatares por función, equipo o estado cuando no utilice imágenes.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Formas de avatar
Elija entre formas circulares (predeterminadas), redondeadas o cuadradas para combinar con su sistema de diseño.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Avatar con iniciales
Muestre las iniciales del usuario para una identificación rápida en listas, hilos de comentarios y secciones de equipo.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Avatar con indicador de estado
Combine avatares con insignias de estado para mostrar la presencia o disponibilidad del usuario (en línea, fuera de línea, ocupado, ausente).
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Avatar con borde de anillo
Agregue anillos decorativos alrededor de los avatares para enfatizar, resaltar el estado o separar visualmente.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Variantes de color de anillo
Elija colores de anillo independientemente de los colores de fondo del avatar.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Grupo de avatares
Apila varios avatares con un margen negativo automático para mostrar superpuestamente a los miembros y colaboradores del equipo.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Grupo de avatar con diferentes tamaños
Combine varios tamaños dentro de un grupo para lograr una jerarquía visual.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Grupo de avatar con estado
Muestra el estado de disponibilidad de cada miembro de un grupo de equipo.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Combined Variants
Mezcle y combine modificadores de tamaño, color, forma, estado y anillo para pantallas de avatar complejas.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Avatar según sea necesario. No más clases alucinadas.