Sistema de diseño
Lightbox
Es un componente emergente que destaca contenido sobre la interfaz principal. Facilita que el usuario se concentre en información clave al minimizar distracciones y resaltar elementos importantes.
Figma
Storybook
AEM
Overview
La lightbox es un componente emergente diseñado para enfocar la atención del usuario en contenido crucial. Ofrece una transición suave y mantiene una jerarquía visual clara, ideal para proporcionar detalles adicionales o llamadas a la acción sin sobrecargar la pantalla principal.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Este componente está disponible en dos variantes: una con ilustración que complementa el texto y otra sin ilustración.
Text
La variante de texto sin ilustración se centra exclusivamente en el contenido textual y las acciones.
Illustration
Esta variante presenta una ilustración destacada situada siempre en primer lugar, encima del texto y las acciones.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cada una de las variantes tiene las siguientes opciones de configuración:
Secondary button
El botón secundario se ubica junto al botón principal y está activo por defecto, ofreciendo a los usuarios una opción adicional para realizar acciones complementarias.
Link
La opción de enlace está activa por defecto y se coloca junto al botón principal o al botón secundario, si este está activo, facilitando el acceso a opciones adicionales.
List (text variant only)
La lista organiza y muestra múltiples elementos de forma estructurada dentro de una modal, mejorando la claridad y accesibilidad del contenido. Por defecto, esta opción está oculta y solo se encuentra disponible en la variante de texto.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
En dispositivos de desktop, la modal (lightbox) tiene los siguientes comportamientos:
Maximum height
La ventana modal ajusta su altura al contenido sin exceder el alto de la pantalla. Si el contenido supera el espacio disponible, la altura de la modal se fija con márgenes de 64px en la parte superior e inferior, habilitando el scroll vertical para visualizar el contenido completo.
Width size (Content lightbox)
En desktop, la modal de contenido ocupa un ancho de 8 columnas.
.png)
Width size (Alert lightbox)
En desktop, la modal de alerta ocupa un ancho de 4 columnas.
.png)
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes