Componentes

Acción principal de la interfaz. Variantes: primario, secundario, terciario e inverse. Disponible en tres tamaños.

Selección múltiple dentro de un formulario o lista de opciones.

Selección exclusiva entre un conjunto de opciones mutuamente excluyentes.

Campo de entrada de texto libre. Incluye variantes con icono, label flotante y texto de ayuda.

Selector desplegable para elegir una opción de una lista predefinida.

Control binario (on/off) para activar o desactivar una configuración con efecto inmediato.

Etiqueta compacta para categorías, filtros o atributos. Puede ser estático o eliminable.

Indicador numérico o de estado superpuesto a un icono o elemento.

Representación visual de un usuario: foto, iniciales o icono genérico.

Indicador de carga indeterminada durante procesos asíncronos.

Texto contextual emergente que aparece al hacer hover sobre un elemento.

Imagen recortada en chaflán con flecha superpuesta, usada como bloque enlazable a contenido.

Lista de bloques título + contenido, separados por línea horizontal.

Tarjeta de contenido/documento con imagen, categoría, párrafo y CTA de descarga o navegación.

Botón con desplegable de opciones para añadir un evento a distintos calendarios (Google, Outlook, etc.).

Cabecera de sección con subtítulo, título (con parte destacada) y descripción o controles de navegación opcionales.

Tarjeta destacada de proyecto especial, en variante texto o con imagen a pantalla completa.

Tarjeta de artículo relacionado, en variante default, minified o landscape.

Contenedor de layout con 9 variantes de rejilla (4-4-4, 6-6, 3-3-3-3, landscape, etc.) para agrupar tarjetas.

Módulo de búsqueda global. Aparece por despliegue del menú superior. Muestra resultados a partir del tercer carácter sin submit.

Selector de fecha única o rango de fechas con calendario desplegable.

Navegación entre vistas relacionadas dentro de un mismo contexto de página.

Indicador de la ruta de navegación actual dentro de la jerarquía del sitio.

Navegación entre páginas de resultados o contenido listado.

Contenedor de información con imagen, título, descripción y acción. Variantes: horizontal y vertical.

Mensaje informativo, de éxito, advertencia o error mostrado inline en el contenido.

Mensaje transitorio superpuesto que confirma una acción o informa de un evento.

Lista de opciones que aparece al interactuar con un trigger. Soporta opciones con icono y grupos.

Imagen a ancho completo usada como separador visual entre secciones de contenido.

Bloque de título + descripción usado como separador editorial entre secciones.

Bloque de cierre de página con título, descripción y CTAs. Admite imagen lateral opcional.

Bloque centrado con título destacado y una nube de tags navegables.

Bloque de cierre con título, descripción, iconos de redes sociales y enlaces de contenido relacionado.

Menú de navegación por anclas dentro de una misma página, con controles de scroll horizontal.

Banner de imagen a ancho completo con categoría, título y CTAs. Variantes fullscreen y size-m.

Bloque de cifras destacadas con descripción, en variante big (3 tamaños) o small (fila de métricas).

Cita textual con autor, en variante solo texto, con foto o con foto a ancho completo (custom).

Bloque de vídeo (local o embed remoto) con categoría, título y descripción. Variantes fullscreen, size-m y size-s.

Barra de navegación principal. Incluye logo, navegación primaria, buscador y acciones de usuario. Transversal a las 3 marcas.

Bloque inferior de cierre de página con enlaces legales, redes sociales y navegación secundaria.

Agrupación de contenido expandible/colapsable organizado por secciones.

Presentación de datos tabulados con soporte para ordenación, paginación y selección de filas.

Capa superpuesta para confirmar acciones críticas o mostrar contenido adicional sin abandonar la página.