Bk_Consumer Finance_logo

Cards

Card Security

Componente diseñado para mostrar consejos de seguridad relacionados con la protección de datos y transacciones en línea. Ayuda a advertir a los usuarios sobre riesgos como estafas telefónicas y el uso indebido de claves o contraseñas, promoviendo prácticas seguras a través de mensajes destacados y enlaces para más información. Ideal para incluir en interfaces bancarias o plataformas que manejan información sensible.

Nunca compartas tus claves ni hagas transferencias por indicaciones telefónicas.

¡Protege tu dinero!
Los estafadores pueden hacerse pasar por bancos o empresas de confianza para engañarte.

Recuerda: tu banco nunca te pedirá claves, contraseñas o transferencias por teléfono.

Más información

Nunca compartas tus claves ni hagas transferencias por indicaciones telefónicas.

¡Protege tu dinero!
Los estafadores pueden hacerse pasar por bancos o empresas de confianza para engañarte.

Recuerda: tu banco nunca te pedirá claves, contraseñas o transferencias por teléfono.

Más información

Nunca compartas tus claves ni hagas transferencias por indicaciones telefónicas.

¡Protege tu dinero!
Los estafadores pueden hacerse pasar por bancos o empresas de confianza para engañarte.

Recuerda: tu banco nunca te pedirá claves, contraseñas o transferencias por teléfono.

Más información

				
					<div id="card-security-1" class="card-security">
<div class="container">
<img loading="lazy" src="https://bkcf.toools.es/componentes/Card_Security_Icon.png" class="img" /></p>
<div class="text">
<div class="nunca-compartas">
        Nunca compartas tus claves ni hagas transferencias por indicaciones telefónicas.<br />
        <br />
        ¡Protege tu dinero!
      </div>
<div class="los-estafadores">
        Los estafadores pueden hacerse pasar por bancos o empresas de confianza para engañarte.<br />
        <br />
        Recuerda: tu banco nunca te pedirá claves, contraseñas o transferencias por teléfono.
      </div>
</p></div>
<div class="link">
      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/ae7980f4ec8c83e97049491c476f124527424b4891aaaa4e164e9db3e9f2cb10?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img-2" /></p>
<div class="text-2">Más información</div>
</p></div>
</p></div>
</div>
<style>
  #card-security-1 {
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #f4f4f5;
    box-shadow: 0px 4px 10px 0px rgba(192, 192, 192, 0.25);
    background-color: #fff;
    display: flex;
    overflow: hidden;
    padding: 60px 0;
  }
  #card-security-1 .container {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    width: 348px;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin: auto 0;
  }
  #card-security-1 .img {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 90px;
    align-self: center;
  }
  #card-security-1 .text {
    align-self: stretch;
    display: flex;
    margin-top: 40px;
    width: 100%;
    flex-direction: column;
    align-items: start;
    color: #000;
    text-align: center;
    justify-content: start;
  }
  #card-security-1 .nunca-compartas {
    letter-spacing: -0.2px;
    font: 700 28px/36px Bankinter Text, sans-serif;
  }
  #card-security-1 .los-estafadores {
    margin-top: 20px;
    font: 400 16px/24px Source Sans Pro, sans-serif;
  }
  #card-security-1 .link {
    display: flex;
    margin-top: 40px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #ce0875;
    text-decoration: underline;
    justify-content: start;
    font: 700 18px Bankinter Text, sans-serif;
  }
  #card-security-1 .img-2 {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
  #card-security .text-2 {
    text-decoration: underline;
    align-self: stretch;
    margin: auto 0;
  }
</style>

				
			
				
					<div id="card-security-1" class="card-security">
<div class="container">
    <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/14e69571948d6b9de9d01577249979c210caae3f18b78867dbaaebf3d08da63e?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img" /></p>
<div class="text">
<div class="nunca-compartas">
        Nunca compartas tus claves ni hagas transferencias por indicaciones telefónicas.<br />
        <br />
        ¡Protege tu dinero!
      </div>
<div class="los-estafadores">
        Los estafadores pueden hacerse pasar por bancos o empresas de confianza para engañarte.<br />
        <br />
        Recuerda: tu banco nunca te pedirá claves, contraseñas o transferencias por teléfono.
      </div>
</p></div>
<div class="link">
      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/ae7980f4ec8c83e97049491c476f124527424b4891aaaa4e164e9db3e9f2cb10?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img-2" /></p>
<div class="text-2">Más información</div>
</p></div>
</p></div>
</div>
<style>
  #card-security-1 {
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #f4f4f5;
    box-shadow: 0px 4px 10px 0px rgba(192, 192, 192, 0.25);
    background-color: #fff;
    display: flex;
    overflow: hidden;
    padding: 60px 0;
  }
  #card-security-1 .container {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    width: 348px;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin: auto 0;
  }
  #card-security-1 .img {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 90px;
    align-self: center;
  }
  #card-security-1 .text {
    align-self: stretch;
    display: flex;
    margin-top: 40px;
    width: 100%;
    flex-direction: column;
    align-items: start;
    color: #000;
    text-align: center;
    justify-content: start;
  }
  #card-security-1 .nunca-compartas {
    letter-spacing: -0.2px;
    font: 700 28px/36px Bankinter Text, sans-serif;
  }
  #card-security-1 .los-estafadores {
    margin-top: 20px;
    font: 400 16px/24px Source Sans Pro, sans-serif;
  }
  #card-security-1 .link {
    display: flex;
    margin-top: 40px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #ce0875;
    text-decoration: underline;
    justify-content: start;
    font: 700 18px Bankinter Text, sans-serif;
  }
  #card-security-1 .img-2 {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
  #card-security .text-2 {
    text-decoration: underline;
    align-self: stretch;
    margin: auto 0;
  }
</style>

Header Dashboard Card

Componente diseñado para presentar información concisa y destacada en paneles de control. Permite resaltar datos clave y ofrecer enlaces relevantes, todo de manera clara y accesible en cualquier dispositivo. Ideal para proporcionar resúmenes visuales o llamadas a la acción en interfaces de usuario, mejorando la experiencia interactiva.

Title
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 commodo consequat.

Type something

Title
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 commodo consequat.

Type something

Title
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 commodo consequat.

Type something

				
					<div id="header-dashboard-card-1" class="div">
<div class="header-dashboard-card">
<div class="title-text">
<div class="title">Title</div>
<div class="description">
        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 commodo consequat.
      </div>
</p></div>
<div class="link">
<div class="text">Type something</div>
<p>      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/df6e5b3ba708e557757fe1ecd10770779d8b54123f6377d2c328279dc24bf679?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img" />
    </div>
</p></div>
</div>
<style>
  #header-dashboard-card-1 {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  #header-dashboard-card-1 .header-dashboard-card {
    border-radius: 8px;
    border: 1px solid #f4f4f5;
    box-shadow: 0px 4px 10px 0px rgba(192, 192, 192, 0.25);
    background-color: #fff;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    justify-content: start;
    padding: 40px;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .header-dashboard-card {
      max-width: 100%;
      padding: 0 20px;
    }
  }
  #header-dashboard-card-1 .title-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    font-weight: 400;
    justify-content: start;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .title-text {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .title {
    color: #171717;
    letter-spacing: -0.2px;
    font: 28px/1 Bankinter Text, sans-serif;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .title {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .description {
    color: #303030;
    margin-top: 8px;
    font: 16px/24px Source Sans Pro, sans-serif;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .description {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .link {
    align-self: start;
    display: flex;
    margin-top: 32px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #ce0875;
    text-decoration: underline;
    justify-content: start;
    flex-wrap: wrap;
    font: 700 16px Source Sans Pro, sans-serif;
  }
  #header-dashboard-card-1 .text {
    text-decoration: underline;
    align-self: stretch;
    margin: auto 0;
  }
  #header-dashboard-card-1 .img {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
</style>

				
			
				
					<div id="header-dashboard-card-1" class="div">
<div class="header-dashboard-card">
<div class="title-text">
<div class="title">Title</div>
<div class="description">
        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 commodo consequat.
      </div>
</p></div>
<div class="link">
<div class="text">Type something</div>
<p>      <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/0c005118f90b4287b8913383c1a91836/df6e5b3ba708e557757fe1ecd10770779d8b54123f6377d2c328279dc24bf679?apiKey=0c005118f90b4287b8913383c1a91836&#038;" class="img" />
    </div>
</p></div>
</div>
<style>
  #header-dashboard-card-1 {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  #header-dashboard-card-1 .header-dashboard-card {
    border-radius: 8px;
    border: 1px solid #f4f4f5;
    box-shadow: 0px 4px 10px 0px rgba(192, 192, 192, 0.25);
    background-color: #fff;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    justify-content: start;
    padding: 40px;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .header-dashboard-card {
      max-width: 100%;
      padding: 0 20px;
    }
  }
  #header-dashboard-card-1 .title-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    font-weight: 400;
    justify-content: start;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .title-text {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .title {
    color: #171717;
    letter-spacing: -0.2px;
    font: 28px/1 Bankinter Text, sans-serif;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .title {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .description {
    color: #303030;
    margin-top: 8px;
    font: 16px/24px Source Sans Pro, sans-serif;
  }
  @media (max-width: 991px) {
    #header-dashboard-card-1 .description {
      max-width: 100%;
    }
  }
  #header-dashboard-card-1 .link {
    align-self: start;
    display: flex;
    margin-top: 32px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #ce0875;
    text-decoration: underline;
    justify-content: start;
    flex-wrap: wrap;
    font: 700 16px Source Sans Pro, sans-serif;
  }
  #header-dashboard-card-1 .text {
    text-decoration: underline;
    align-self: stretch;
    margin: auto 0;
  }
  #header-dashboard-card-1 .img {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
</style>

Credit card

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.

Loan card

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.

Card account

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.

Card item product

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.

Card item operation

Card titular

Dashboard Card

Componentes