Design system AFP Modelo

Las 15 primitivas portadas del JSX de la skill afp-modelo-design a SFC de Vue 3. Los tokens CSS van tal cual; el hover y el foco son CSS, no estado.

Core · Button

Core · CambiateButton · IconButton · Icon

Cambiate a Modelo
Cambiate a Modelo

Forms · TextField · RadioGroup

Sexo
En columna

Valor del formulario: RUT «», sexo «Hombre».

Navigation · NavMenu · ProfileTabs

Sección activa: «afiliados».

Perfil activo: «simulador».

Cards · QuotaBar · QuotaFundCard

Valor cuota

10-11-2026

FondoAMás riesgoso
$ 2.371,27
FondoBRiesgoso
$ 2.139,06
FondoCIntermedio
$ 2.004,48
FondoDConservador
$ 1.736,88
FondoEMás conservador
$ 1.618,44
Ver evolución
FondoCIntermedio
$ 2.004,48

Cards · SavingsCard

APV

Ahorra con beneficio tributario y mejora tu pensión.

Ver más

Cuenta 2

Ahorro voluntario de libre disposición.

Ver más

Depósito Convenido

Tu empleador aporta directo a tu pensión.

Ver más

Cards · AccessCard

Afiliados

Revisa tu saldo y tus cotizaciones

Ingresar
Pensionados

Liquidaciones y pago de tu pensión

Ver más
Empleadores

Paga las cotizaciones de tus trabajadores

Ingresar
Beneficiarios

Trámites de sobrevivencia

Ingresar

Cards · CertificatesCard · CertificateItem

Certificados

Certificado de afiliaciónAcredita que estás en AFP Modelo.DescargarCertificado de cotizacionesDescargarCertificado de saldoDescargar PDF

Cards · InterestItem

¿Cuánto necesito ahorrar para la pensión que quiero?

Ver más

Conoce la PGU y si te corresponde

Saber más

Descarga nuestra aplicación móvil

Ver más

Ant Design Vue 4, tematizado con los tokens Modelo

Lo que no vale la pena reimplementar: menú, pestañas, carrusel, formularios y dropdown. Si acá se ve azul en vez de verde Modelo, el tema no se aplicó.

Fondo C
Simula tu pensión aquí