Accordion
El Accordion es un contenedor que organiza y jerarquiza información que no necesita estar visible todo el tiempo, reduciendo el scroll excesivo y otorgando control al usuario sobre lo que desea explorar[cite: 1, 2].
Previsualización Rápida
Section titled “Previsualización Rápida”Podés solicitar la reposición o un nuevo ejemplar desde la sección de Tarjetas dentro de la aplicación móvil o en el portal web de Home Banking.
Las cuentas sueldo y cajas de ahorro en pesos no poseen costo de mantenimiento mensual.
Propósito
Section titled “Propósito”El propósito del Accordion es estructurar contenido secundario o repetitivo sin saturar la pantalla[cite: 1]. Permite mantener la interfaz limpia, evitando desplazamientos extensos y priorizando el foco del usuario[cite: 1].
Anatomía del Componente
Section titled “Anatomía del Componente”- Slot Accordion.Control (Header interactivo): Área de interacción para abrir o colapsar el panel[cite: 1, 2]. Debe construirse usando componentes locales del Design System dentro de sus slots[cite: 1].
- Icono decorativo (Chevron): Indicador visual que cambia su orientación vertical para comunicar el estado de apertura[cite: 1, 2]. Se inserta automáticamente; no debe agregarse manualmente en el slot[cite: 1].
- Slot Accordion.Panel (Body): Área que contiene el texto, datos o componentes desplegables[cite: 1, 2]. Se ajusta siempre con un comportamiento fill al contenido horizontal y hug vertical[cite: 1].
- Stroke / Divider (Booleano): Delimitador de borde opcional para enmarcar el contenedor o separar elementos en listados[cite: 1, 2].
Este es el cuerpo del acordeón (Panel) en estado desplegado. Puede albergar textos, listas u otros componentes.
Estados de Interacción
Section titled “Estados de Interacción”- Cerrado: El panel de contenido está oculto y el indicador visual señala hacia abajo[cite: 1].
- Abierto: El panel de contenido se despliega y el indicador rota verticalmente hacia arriba[cite: 1].
- Hover: Al pasar el cursor sobre el header, el área cambia su estilo visual de fondo para comunicar interactividad[cite: 1].
- Foco: Durante la navegación mediante teclado, el elemento muestra un indicador de foco accesible alrededor del header[cite: 1].
- Disabled: Desactiva la interacción y reduce el contraste para indicar que la sección no se encuentra disponible[cite: 1].
Contenido deshabilitado.
Usos Recomendados y Guía de UX
Section titled “Usos Recomendados y Guía de UX”Cuándo usar
Section titled “Cuándo usar”- Preguntas Frecuentes (FAQs): Para organizar listados extensos de dudas o respuestas comunes[cite: 1].
- Formularios extensos: Para agrupar conjuntos de campos opcionales o secundarios[cite: 1].
- Configuraciones complejas: Secciones avanzadas que no requieren estar expuestas constantemente[cite: 1].
- Estructuras repetitivas: Cuando el contenido comparte un mismo patrón visual agrupado en múltiples bloques[cite: 1].
Cuándo NO usar
Section titled “Cuándo NO usar”Listados Múltiples
Section titled “Listados Múltiples”Cuando se presenta una secuencia o listado de acordeones múltiples, debe aplicarse la variante con divisor (hasDivider) o utilizar una separación mediante un espaciado vertical estricto de 16px (gap: 16px) entre cada elemento[cite: 1].
Formulario de datos personales del titular.
Información sobre el domicilio declarado.
Ajustes de alertas por correo electrónico.