AccessCard
El AccessCard Custom es el componente accionable principal del sistema para ingresar a servicios, gestiones o secciones operativas de la plataforma desde pantallas clave como Landing o Home.
Previsualización Rápida
Section titled “Previsualización Rápida”Servicios y Pagos
Agregá o pagá un nuevo servicio y te avisaremos en los próximos vencimientos
Cuándo usar este componente
Section titled “Cuándo usar este componente”- Navegación principal: Para accesos directos desde la pantalla de inicio o landings hacia flujos específicos.
- Contenido agrupado de valor: Cuando se requiera presentar un servicio junto a una breve bajada explicativa o indicadores de estado.
Anatomía del Componente
Section titled “Anatomía del Componente”El componente está estructurado sobre la base de un contenedor Paper (size md):
- Paper Container (size md): Estructura base elevada con borde y respuesta al hover.
- Label: Título principal con peso tipográfico destacado (
Body Normal Strong). - Badge (Opcional): Etiqueta de estado para resaltar promociones, novedades o alertas (
Novedad,Nuevo). - Indicator (Opcional): Etiqueta contextual complementaria ubicada en el extremo superior derecho.
- ThemeIcon / Avatar (Opcional): Contenedor de ícono representativo de la categoría o servicio.
- Description (Opcional): Bajada de texto aclaratoria de hasta dos líneas.
- Anchor Text (Opcional): Enlace explicativo complementario en la parte inferior del texto.
- Action Icon: Ícono indicador de dirección (
ChevronRight) que confirma que la tarjeta es accionable.
Consideraciones de Diseño e Interacción
Section titled “Consideraciones de Diseño e Interacción”1. Avatar e Íconos
Section titled “1. Avatar e Íconos”- Flexibilidad: El icono del avatar se adapta al contexto del servicio que representa.
- Fallback: Si el servicio no cuenta con una iconografía definida o disponible, deshabilita el elemento
ThemeIcon(hasThemeIcon={false}) para mantener la alineación del texto a la izquierda sin dejar espacios vacíos.
Transferencias Directas
Enviá dinero a cualquier cuenta de forma inmediata sin comisiones.
2. Comportamiento Accionable y Hover
Section titled “2. Comportamiento Accionable y Hover”- Toda la superficie del AccessCard es interactiva y responde al pasar el cursor (Hover state de Paper).
- Permite definir si ejecuta una función mediante un evento de clic o si redirige directamente a una nueva URL mediante una etiqueta de navegación.
3. Adaptabilidad en Dispositivos Móviles
Section titled “3. Adaptabilidad en Dispositivos Móviles”En pantallas pequeñas (Mobile), el AccessCard se ajusta automáticamente para abarcar el 100% del ancho del contenedor, garantizando un área de toque adecuada para la interacción táctil.