Avatar Documentation
Uso Básico
El componente .avatar adapta automáticamente imágenes, texto o iconos.
| Resultado | Uso | Clase |
|---|---|---|
 |
Imagen | img |
|
|
Texto (Iniciales) | span |
|
|
Icono | i.bi... |
Formas
Modifica el borde con clases adicionales.
.avatar.avatar-rounded.avatar-squareTamaños Disponibles
Desde XS hasta XL.
.avatar-xl.avatar-lg(default).avatar-sm.avatar-xsColores del Tema
Usa las clases .avatar-{color}. El texto se ajusta automáticamente para tener contraste.
.primary.secondary.success.danger.warning.info.light.darkStatus
Añade .avatar-status y un color de fondo. El borde blanco/negro es automático.
Online
Ocupado
Ausente
Avatar Group
Agrupa avatares solapados usando .avatar-group.
Grupo Grande
A
+3
Grupo Pequeño
9+
Soporte de Iconos
Todos los iconos se centran automáticamente gracias a line-height: 1 y 1em.
| Librería | XS | SM | Default | LG | XL |
|---|---|---|---|---|---|
| Font Awesome |
|
|
|
|
|
| Bootstrap Icons |
|
|
|
|
|
| Feather Icons |
|
|
|
|
|
Lightbox Interactivo
Integración con GLightbox para previsualizar imágenes o videos.
