Bk_Consumer Finance_logo

Navigation

Footer Privado

Componente de pie de página que organiza tres secciones de enlaces: Tarjetas, Préstamos y Nosotros. Incluye un logotipo de la empresa y una disposición que se adapta a diferentes tamaños de pantalla. Las secciones de enlaces permiten una fácil navegación entre distintos productos y servicios, mientras que el área inferior del pie de página muestra los derechos reservados. Ideal para proporcionar una estructura clara y accesible de la información empresarial.

Tarjetas
Tarjetas de Viajes
Tarjeta Fracciona
Tarjeta Supermercados
Tarjeta de Mascotas
Tarjeta VISA Air Europa Suma
Tarjeta VISA Vodafone
Tarjeta Línea Directa Aseguradora
Preguntas frecuentes tarjetas

Préstamos
Préstamo personal
Préstamo coche
Préstamo estudios
Préstamo vacaciones
Préstamo bodas
Préstamo reformas
Préstamo eficiencia energética
Calculadora de préstamos

Nosotros
Gobierno Corporativo y

Política de Remuneraciones
Aviso Legal
Normas de Privacidad
Política de Datos
Política de Cookies
Información a clientes
Servicio de Atención al Cliente
Portal Banco de España
Blog Finanzas del día a día

© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados
Tarjetas
Tarjetas de Viajes
Tarjeta Fracciona
Tarjeta Supermercados
Tarjeta de Mascotas
Tarjeta VISA Air Europa Suma
Tarjeta VISA Vodafone
Tarjeta Línea Directa Aseguradora
Preguntas frecuentes tarjetas

Préstamos
Préstamo personal
Préstamo coche
Préstamo estudios
Préstamo vacaciones
Préstamo bodas
Préstamo reformas
Préstamo eficiencia energética
Calculadora de préstamos

Nosotros
Gobierno Corporativo y

Política de Remuneraciones
Aviso Legal
Normas de Privacidad
Política de Datos
Política de Cookies
Información a clientes
Servicio de Atención al Cliente
Portal Banco de España
Blog Finanzas del día a día

© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados
Tarjetas
Tarjetas de Viajes
Tarjeta Fracciona
Tarjeta Supermercados
Tarjeta de Mascotas
Tarjeta VISA Air Europa Suma
Tarjeta VISA Vodafone
Tarjeta Línea Directa Aseguradora
Preguntas frecuentes tarjetas

Préstamos
Préstamo personal
Préstamo coche
Préstamo estudios
Préstamo vacaciones
Préstamo bodas
Préstamo reformas
Préstamo eficiencia energética
Calculadora de préstamos

Nosotros
Gobierno Corporativo y

Política de Remuneraciones
Aviso Legal
Normas de Privacidad
Política de Datos
Política de Cookies
Información a clientes
Servicio de Atención al Cliente
Portal Banco de España
Blog Finanzas del día a día

© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados 
				
					<div class="footer">
<div class="container">
<div class="logo-bankinter">
      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/0be9b1ebc9068ac91e728a6446c81e1c29cfb8efdf62841c7bcf1d55501d3c41?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img" />
    </div>
<div class="container-body-left">
<div class="header-link">Tarjetas</div>
<div class="body-link">
<div class="link">Tarjetas de Viajes</div>
<div class="link-2">Tarjeta Fracciona</div>
<div class="link-3">Tarjeta Supermercados</div>
<div class="link-4">Tarjeta de Mascotas</div>
<div class="link-5">Tarjeta VISA Air Europa Suma</div>
<div class="link-6">Tarjeta VISA Vodafone</div>
<div class="link-7">Tarjeta Línea Directa Aseguradora</div>
<div class="link-8">Preguntas frecuentes tarjetas</div>
</p></div>
</p></div>
<div class="container-body-middle">
<div class="header-link">Préstamos</div>
<div class="body-link">
<div class="link">Préstamo personal</div>
<div class="link-9">Préstamo coche</div>
<div class="link-10">Préstamo estudios</div>
<div class="link-11">Préstamo vacaciones</div>
<div class="link-12">Préstamo bodas</div>
<div class="link-13">Préstamo reformas</div>
<div class="link-14">Préstamo eficiencia energética</div>
<div class="link-15">Calculadora de préstamos</div>
</p></div>
</p></div>
<div class="container-body-right">
<div class="header-link">Nosotros</div>
<div class="body-link-2">
<div class="link">
          Gobierno Corporativo y<br />
          <br />
          Política de Remuneraciones
        </div>
<div class="link-16">Aviso Legal</div>
<div class="link-17">Normas de Privacidad</div>
<div class="link-18">Política de Datos</div>
<div class="link-19">Política de Cookies</div>
<div class="link-20">Información a clientes</div>
<div class="link-21">Servicio de Atención al Cliente</div>
<div class="link-22">Portal Banco de España</div>
<div class="link-23">Blog Finanzas del día a día</div>
</p></div>
</p></div>
</p></div>
<div class="container-bottom">
    © Bankinter Consumer Finance, E:F.C.,S.A. &#8211; Todos los derechos reservados
  </div>
</div>
<style>
  .footer {
    background-color: rgba(48, 48, 48, 1);
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .container {
    background-color: rgba(74, 74, 74, 1);
    display: flex;
    width: 100%;
    align-items: start;
    gap: 60px 24px;
    justify-content: start;
    flex-wrap: wrap;
    padding: 80px 120px;
  }
  @media (max-width: 991px) {
    .container {
      max-width: 100%;
      padding: 0 20px;
    }
  }
  .logo-bankinter {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    overflow: hidden;
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .img {
    aspect-ratio: 2;
    object-fit: contain;
    object-position: center;
    width: 140px;
    max-width: 100%;
  }
  .container-body-left {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .header-link {
    align-self: start;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    font: 700 18px Bankinter Text, sans-serif;
  }
  @media (max-width: 991px) {
    .header-link {
      white-space: initial;
    }
  }
  .body-link {
    display: flex;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    font: 400 16px Source Sans Pro, sans-serif;
  }
  .link {
    align-self: stretch;
    gap: 5px;
    overflow: hidden;
  }
  .link-2 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-3 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-4 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-5 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-6 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-7 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-8 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-body-middle {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .link-9 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-10 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-11 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-12 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-13 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-14 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-15 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-body-right {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .body-link-2 {
    display: flex;
    margin-top: 24px;
    width: 100%;
    max-width: 312px;
    flex-direction: column;
    overflow: hidden;
    align-items: start;
    justify-content: start;
    font: 400 16px Source Sans Pro, sans-serif;
  }
  .link-16 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-17 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-18 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-19 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-20 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-21 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-22 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-23 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-bottom {
    align-self: stretch;
    background-color: rgba(48, 48, 48, 1);
    width: 100%;
    gap: 10px;
    color: rgba(255, 255, 255, 1);
    padding: 25px 10px;
    font: 400 14px Source Sans Pro, sans-serif;
  }
  @media (max-width: 991px) {
    .container-bottom {
      max-width: 100%;
    }
  }
</style>

				
			
				
					<div class="footer">
<div class="container">
<div class="logo-bankinter">
      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/0be9b1ebc9068ac91e728a6446c81e1c29cfb8efdf62841c7bcf1d55501d3c41?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img" />
    </div>
<div class="container-body-left">
<div class="header-link">Tarjetas</div>
<div class="body-link">
<div class="link">Tarjetas de Viajes</div>
<div class="link-2">Tarjeta Fracciona</div>
<div class="link-3">Tarjeta Supermercados</div>
<div class="link-4">Tarjeta de Mascotas</div>
<div class="link-5">Tarjeta VISA Air Europa Suma</div>
<div class="link-6">Tarjeta VISA Vodafone</div>
<div class="link-7">Tarjeta Línea Directa Aseguradora</div>
<div class="link-8">Preguntas frecuentes tarjetas</div>
</p></div>
</p></div>
<div class="container-body-middle">
<div class="header-link">Préstamos</div>
<div class="body-link">
<div class="link">Préstamo personal</div>
<div class="link-9">Préstamo coche</div>
<div class="link-10">Préstamo estudios</div>
<div class="link-11">Préstamo vacaciones</div>
<div class="link-12">Préstamo bodas</div>
<div class="link-13">Préstamo reformas</div>
<div class="link-14">Préstamo eficiencia energética</div>
<div class="link-15">Calculadora de préstamos</div>
</p></div>
</p></div>
<div class="container-body-right">
<div class="header-link">Nosotros</div>
<div class="body-link-2">
<div class="link">
          Gobierno Corporativo y<br />
          <br />
          Política de Remuneraciones
        </div>
<div class="link-16">Aviso Legal</div>
<div class="link-17">Normas de Privacidad</div>
<div class="link-18">Política de Datos</div>
<div class="link-19">Política de Cookies</div>
<div class="link-20">Información a clientes</div>
<div class="link-21">Servicio de Atención al Cliente</div>
<div class="link-22">Portal Banco de España</div>
<div class="link-23">Blog Finanzas del día a día</div>
</p></div>
</p></div>
</p></div>
<div class="container-bottom">
    © Bankinter Consumer Finance, E:F.C.,S.A. &#8211; Todos los derechos reservados
  </div>
</div>
<style>
  .footer {
    background-color: rgba(48, 48, 48, 1);
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .container {
    background-color: rgba(74, 74, 74, 1);
    display: flex;
    width: 100%;
    align-items: start;
    gap: 60px 24px;
    justify-content: start;
    flex-wrap: wrap;
    padding: 80px 120px;
  }
  @media (max-width: 991px) {
    .container {
      max-width: 100%;
      padding: 0 20px;
    }
  }
  .logo-bankinter {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    overflow: hidden;
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .img {
    aspect-ratio: 2;
    object-fit: contain;
    object-position: center;
    width: 140px;
    max-width: 100%;
  }
  .container-body-left {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .header-link {
    align-self: start;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    font: 700 18px Bankinter Text, sans-serif;
  }
  @media (max-width: 991px) {
    .header-link {
      white-space: initial;
    }
  }
  .body-link {
    display: flex;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    font: 400 16px Source Sans Pro, sans-serif;
  }
  .link {
    align-self: stretch;
    gap: 5px;
    overflow: hidden;
  }
  .link-2 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-3 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-4 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-5 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-6 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-7 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-8 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-body-middle {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .link-9 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-10 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-11 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-12 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-13 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-14 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-15 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-body-right {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: var(--03-Buttons-Link-Text-White-default, #fff);
    justify-content: start;
    flex-grow: 1;
    width: 240px;
  }
  .body-link-2 {
    display: flex;
    margin-top: 24px;
    width: 100%;
    max-width: 312px;
    flex-direction: column;
    overflow: hidden;
    align-items: start;
    justify-content: start;
    font: 400 16px Source Sans Pro, sans-serif;
  }
  .link-16 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-17 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-18 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-19 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-20 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-21 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-22 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .link-23 {
    align-self: stretch;
    margin-top: 16px;
    gap: 5px;
    overflow: hidden;
  }
  .container-bottom {
    align-self: stretch;
    background-color: rgba(48, 48, 48, 1);
    width: 100%;
    gap: 10px;
    color: rgba(255, 255, 255, 1);
    padding: 25px 10px;
    font: 400 14px Source Sans Pro, sans-serif;
  }
  @media (max-width: 991px) {
    .container-bottom {
      max-width: 100%;
    }
  }
</style>

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Action footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

OTP sign

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer Public

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados








© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados








© Bankinter Consumer Finance, E:F.C.,S.A. – Todos los derechos reservados 

				
					<div class="flex flex-col items-center px-0 py-20 bg-zinc-100">
<div class="flex flex-wrap justify-between px-32 py-0 w-full max-w-[1272px] max-md:px-5 max-md:py-0 max-sm:flex-col max-sm:items-center">
<nav class="flex flex-col min-w-[240px]" aria-label="Footer Navigation - Cards">
<h2 class="text-lg text-black">Tarjetas</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjetas de Viajes</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta Fracciona</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta Supermercados</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta de Mascotas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta VISA Air Europa Suma</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta VISA Vodafone</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Tarjeta Línea Directa Aseguradora</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Preguntas frecuentes tarjetas</a></li>
</ul>
</nav>
<nav class="flex flex-col min-w-[240px]" aria-label="Footer Navigation - Loans">
<h2 class="text-lg text-black">Préstamos</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo personal</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo coche</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo estudios</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo vacaciones</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo bodas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo reformas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo bodas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Préstamo eficiencia energética</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Calculadora de préstamos</a></li>
</ul>
</nav>
<nav class="flex flex-col min-w-[240px]" aria-label="Footer Navigation - About Us">
<h2 class="text-lg text-black">Nosotros</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Gobierno Corporativo y Política de Remuneraciones</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Aviso Legal</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Normas de Privacidad</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Política de Datos</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Política de Cookies</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Información a clientes</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Servicio de Atención al Cliente</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Portal Banco de España</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-pink-700">Blog Finanzas del día a día</a></li>
</ul>
</nav></div>
<div class="mt-9">
    
      
    
  </div>
<div class="flex flex-col items-center px-32 py-12 w-full max-md:px-5 max-md:py-12">
<div class="flex justify-between items-center w-full max-sm:flex-col max-sm:gap-5">
      <a href="/" aria-label="Bankinter Home"><br />
        
          
        <br />
      </a></p>
<div class="flex gap-5 max-sm:gap-2.5">
        <a href="https://facebook.com" class="flex justify-center items-center bg-pink-700 rounded-full h-[50px] w-[50px] hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-700" aria-label="Visit our Facebook page"><br />
          
            
          <br />
        </a><br />
        <a href="https://twitter.com" class="flex justify-center items-center bg-pink-700 rounded-full h-[50px] w-[50px] hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-700" aria-label="Visit our Twitter page"><br />
          
            
          <br />
        </a>
      </div>
</p></div>
<div class="mt-10 text-sm text-neutral-600">
      © Bankinter Consumer Finance, E:F.C.,S.A. &#8211; Todos los derechos reservados
    </div>
</p></div>
</div>

				
			
				
					<nav class="flex flex-wrap justify-between px-32 py-0 w-full max-w-[1272px] max-md:px-5 max-md:py-0 max-sm:flex-col max-sm:items-center" aria-label="Footer Navigation">
<div class="flex flex-col min-w-[240px]">
<h2 class="text-lg text-black">Tarjetas</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjetas de Viajes</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta Fracciona</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta Supermercados</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta de Mascotas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta VISA Air Europa Suma</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta VISA Vodafone</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Tarjeta Línea Directa Aseguradora</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Preguntas frecuentes tarjetas</a></li>
</ul></div>
<div class="flex flex-col min-w-[240px]">
<h2 class="text-lg text-black">Préstamos</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo personal</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo coche</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo estudios</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo vacaciones</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo bodas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo reformas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo bodas</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Préstamo eficiencia energética</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Calculadora de préstamos</a></li>
</ul></div>
<div class="flex flex-col min-w-[240px]">
<h2 class="text-lg text-black">Nosotros</h2>
<ul class="flex flex-col mt-8">
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Gobierno Corporativo y Política de Remuneraciones</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Aviso Legal</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Normas de Privacidad</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Política de Datos</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Política de Cookies</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Información a clientes</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Servicio de Atención al Cliente</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Portal Banco de España</a></li>
<li><a href="#" class="mt-5 text-base text-black hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Blog Finanzas del día a día</a></li>
</ul></div>
</nav>

Footer con enlaces y redes sociales

Componente de pie de página que organiza enlaces de navegación en tres secciones: tarjetas, préstamos y sobre la empresa. Incluye también íconos de redes sociales para interactuar con los usuarios y un mensaje de derechos reservados. Es ideal para proporcionar acceso rápido a información clave y contactar con la empresa a través de redes sociales.

				
					<footer class="px-0 py-20 w-full bg-zinc-100">
<div class="flex flex-wrap gap-6 justify-between px-32 py-0 mx-auto my-0 max-w-[1512px] max-md:gap-10 max-md:px-10 max-md:py-0 max-sm:flex-col max-sm:px-5 max-sm:py-0"></p>
<nav class="flex-1 max-w-[408px] min-w-60 max-md:min-w-[200px] max-sm:max-w-full"></p>
<h2 class="mb-6 text-lg text-black">Tarjetas</h2>
<ul class="flex flex-col gap-4">
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjetas de Viajes</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta Fracciona</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta Supermercados</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta de Mascotas</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta VISA Air Europa Suma</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta VISA Vodafone</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Tarjeta Línea Directa Aseguradora</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Preguntas frecuentes tarjetas</a>
        </li>
</ul>
</nav>
<nav class="flex-1 max-w-[408px] min-w-60 max-md:min-w-[200px] max-sm:max-w-full"></p>
<h2 class="mb-6 text-lg text-black">Préstamos</h2>
<ul class="flex flex-col gap-4">
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo personal</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo coche</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo estudios</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo vacaciones</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo bodas</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo reformas</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo bodas</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Préstamo eficiencia energética</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Calculadora de préstamos</a>
        </li>
</ul>
</nav>
<nav class="flex-1 max-w-[408px] min-w-60 max-md:min-w-[200px] max-sm:max-w-full"></p>
<h2 class="mb-6 text-lg text-black">Nosotros</h2>
<ul class="flex flex-col gap-4">
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Gobierno Corporativo y Política de Remuneraciones</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Aviso Legal</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Normas de Privacidad</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Política de Datos</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Política de Cookies</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Información a clientes</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Servicio de Atención al Cliente</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Portal Banco de España</a>
        </li>
<li>
          <a href="#" class="text-base text-black no-underline cursor-pointer">Blog Finanzas del día a día</a>
        </li>
</ul>
</nav></div>
<div class="flex flex-col gap-10 px-32 py-12 max-sm:px-5 max-sm:py-10">
<div class="flex justify-between items-center max-sm:flex-col max-sm:gap-8">
<div class="flex gap-5">
        <a href="#" class="flex justify-center items-center bg-pink-700 rounded-full cursor-pointer h-[50px] w-[50px]" aria-label="Facebook"><br />
          <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/40919b9b80d70c55a96e9ed540006633c432c43a42dcdd5a611653084eab9312" alt="Facebook" class="w-6 h-6" loading="lazy" /><br />
        </a><br />
        <a href="#" class="flex justify-center items-center bg-pink-700 rounded-full cursor-pointer h-[50px] w-[50px]" aria-label="Twitter"><br />
          <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/35f01630848ffe51e50ecc1e4a1d97264fc6d2ffc11f4918a435c97c955218fb" alt="Twitter" class="w-6 h-6" loading="lazy" /><br />
        </a>
      </div>
</p></div>
<p class="text-sm text-neutral-600">
      © Bankinter Consumer Finance, E:F.C.,S.A. &#8211; Todos los derechos reservados
    </p>
</p></div>
</footer>

Componentes