Ficha
- Categoría
- App shell & patterns
- Nivel
- plantilla
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 468:16143
- Fuente
design-system/componentes/AppShellAcceso.md
Esqueleto de acceso (login, registro, recuperar contraseña). Layout=centered (opción C, la del alcance del 28-oct): logo Aithu (+ logo del banco) sobre una tarjeta. Layout=split (opción B): panel de marca con el mosaico de clientes simulados a la izquierda y el formulario plano a la derecha. Ambos exponen Bank logo y, por la tarjeta anidada (_AccessCard), Heading + slot Content.
Cuándo usarlo
- Login, registro y recuperar contraseña (versión C centrada, reglas/01 §01.1).
Cuándo NO usarlo
- Dentro del producto: AppShell/Principal o AppShell/Foco.
Anatomía
centered: logo 120 arriba, tarjeta 400 (padding 32, gap 20, radius-5x, Shadow/Card) con h1 heading/lg + slot, pie de enlaces body/xs. split: panel 464 brand primary (padding 48: logo negativo, mosaico 6×112×128, propuesta heading/lg, apoyo body/md, pie) + formulario 360 plano.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
bankLogo | Bank logo | boolean | false |
layout | Layout | centered · split | centered |
heading | Heading (_AccessCard) | texto, h1 | — |
children | slot Content (_AccessCard) | nodos | — |
bankLogoNode | bank-logo | nodo del logo del banco | placeholder |
clientes, propuesta, apoyo | «clientes que esperan» (split) | 6 fotos · textos | textos de Figma |
Estados
Sin estados.
Accesibilidad
- Un solo h1 (Heading); el mosaico es decorativo (aria-hidden); los enlaces del pie; los campos van etiquetados (TextField) y los errores se anuncian junto al campo.
Contenido
Logo del banco solo cuando el banco es conocido (desde Registro/00a o un dispositivo recordado); nunca tres logos (DV-09).
Errores conocidos
- Los enlaces del pie («Términos de uso · Privacidad · Ayuda») apuntan a «#»: no hay pantallas de términos en el alcance.
Changelog
- 2026-10-26 · el marcador del logo del banco lleva role=img con nombre («Logo del banco (marcador…)») para que se note dónde irá el logo real (reglas/09 P-04) (T-04).
- 2026-10-26 · nace (T-02).