Tarjetas
Las tarjetas contienen contenido y acciones que relacionan información sobre un tema.
Las tarjetas tienen una funcionalidad versátil y se utilizan para diversas finalidades,
y se utilizan para organizar y presentar contenido de manera visualmente atractiva y
escaneable. Permiten interacciones, como acciones específicas, personalización y
filtrado, y brindan feedback y notificaciones relevantes. Las tarjetas mejoran la
experiencia del usuario al facilitar la exploración, la interacción y la accesibilidad
al contenido presentado.
Estas son algunas de las características y funcionalidades clave de las tarjetas:
- Organizar: Las tarjetas se utilizan para organizar y presentar contenido de manera estructurada y visualmente atractiva. Pueden contener información, imágenes, títulos y descripciones concisas, lo que permite presentar el contenido de manera clara y fácilmente legible.
- Accesibilidad: Las tarjetas se diseñan para ser visualmente atractivas y escaneables. Su estructura y diseño permiten a los usuarios identificar rápidamente el contenido relevante y hacer una lectura rápida para determinar si desean interactuar con la tarjeta o profundizar en el contenido.
- Interacción: Las tarjetas pueden ser interactivas y permitir acciones específicas. Por ejemplo, pueden incluir botones o enlaces que dirijan a los usuarios a páginas de detalles, páginas de producto o acciones específicas relacionadas con la tarjeta. Esto brinda a los usuarios la capacidad de interactuar directamente con el contenido de la tarjeta.
- Responsividad: Las tarjetas se adaptan a diferentes tamaños de pantalla y dispositivos, lo que las hace altamente responsivas. Esto permite una experiencia de usuario consistente y agradable, independientemente del dispositivo utilizado.
- Formato: Existen diversos tamaños y formatos de tarjetas para ser utilizadas según el énfasis y el ritmo del contexto donde se encuentran. Hay tarjetas horizontales, verticales y otras cuadradas.
Tarjeta Grande con imagen, título, descripción y botón
HTML
<a href="#" style="text-decoration: none;">
<div class="card">
<div class="card-body">
<img src="img/iconos-seccion.svg" alt="">
<h2>Título Mediano de una o dos lineas de extensión</h2>
<p>Bajada y descripción de dos lineas máximo para motivar a la
lectura...
</p>
</div>
<div class="card-actions">
<button class="terciario">Acción
<img src="iconos/flecha-derecha-border.svg" alt="" width="32px"
height="32px"></button>
</div>
</div>
</a>
CSS
.card {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 450px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card .card-body img {
height: 190px;
}
.card .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #024588;
mix-blend-mode: normal;
}
.card .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card .card-actions {
display: flex;
justify-content: flex-end;
}
JS
Tarjeta grande con título, chips, imagen, descripción y botón de texto
HTML
<a href="#" style="text-decoration: none;">
<div class="card-secundaria">
<div class="card-body">
<h2>Título Mediano de una o dos lineas de extensión</h2>
<div class="chips-container-row">
<span class="chips-primario">Chips 1</span>
<span class="chips-primario">Chips 2</span>
<span class="chips-primario">Chips 3</span>
</div>
<img src="img/iconos-seccion.svg" alt="">
<p>Bajada y descripción de dos lineas máximo para motivar a la
lectura...
</p>
</div>
<div class="card-actions">
<button class="texto">Acción
<img src="iconos/flecha-derecha-border.svg"
alt="" width="32px" height="32px"></button>
</div>
</div>
</a>
CSS
.card-secundaria {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 360px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card-secundaria:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-secundaria .card-body img {
height: auto;
max-height: 190px;
}
.card-secundaria .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #024588;
mix-blend-mode: normal;
}
.card-secundaria .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-secundaria .card-actions {
display: flex;
justify-content: center;
width: 100%;
}
.card-secundaria .card-actions button {
width: 100%;
}
JS
Tarjeta mediana con imagen, título y descripción
HTML
<a href="#" style="text-decoration: none;">
<div class="card-pequena">
<div class="card-body">
<img src="img/iconos-seccion.svg" alt="">
<h2>Título Mediano</h2>
<p>Bajada y descripción de dos lineas máximo para motivar a la lectura...
</p>
</div>
</div>
</a>
CSS
.card-pequena {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 360px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card-pequena:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-pequena:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-pequena .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-pequena .card-body img {
height: auto;
max-height: 190px;
}
.card-pequena .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #024588;
mix-blend-mode: normal;
}
.card-pequena .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-pequena .card-actions {
display: flex;
justify-content: flex-end;
}
JS
Tarjeta mediana con título, chips, descripción y botón terciario
HTML
<a href="#" style="text-decoration: none;">
<div class="card-secundaria">
<div class="card-body">
<h2>Título Mediano de una o dos lineas de extensión</h2>
<div class="chips-container-row">
<span class="chips-primario">Chips 1</span>
<span class="chips-primario">Chips 2</span>
<span class="chips-primario">Chips 3</span>
</div>
<p>Bajada y descripción de dos lineas máximo para motivar a la lectura...
</p>
</div>
<div class="card-actions">
<button class="terciario">Acción <img
src="iconos/flecha-derecha-border.svg"
alt="" width="32px" height="32px"></button>
</div>
</div>
</a>
CSS
.card-secundaria {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 360px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card-secundaria:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-secundaria .card-body img {
height: auto;
max-height: 190px;
}
.card-secundaria .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #024588;
mix-blend-mode: normal;
}
.card-secundaria .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-secundaria .card-actions {
display: flex;
justify-content: center;
width: 100%;
}
.card-secundaria .card-actions button {
width: 100%;
}
JS
Tarjeta pequeña con título, descripción y botón secundario
HTML
<a href="#" style="text-decoration: none;">
<div class="card-secundaria">
<div class="card-body">
<h2>Título Mediano de dos lineas máximo</h2>
<p>Bajada y descripción de dos lineas máximo para motivar a la lectura...
</p>
</div>
<div class="card-actions">
<button class="secundario">Acción <img
src="iconos/flecha-derecha-border.svg" alt="" width="32px"
height="32px"></button>
</div>
</div>
</a>
CSS
.card-secundaria {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 360px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card-secundaria:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-secundaria .card-body img {
height: auto;
max-height: 190px;
}
.card-secundaria .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #024588;
mix-blend-mode: normal;
}
.card-secundaria .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-secundaria .card-actions {
display: flex;
justify-content: center;
width: 100%;
}
.card-secundaria .card-actions button {
width: 100%;
}
JS
Tarjeta horizontal con título, chip e icono
HTML
<a href="#" style="text-decoration: none;">
<div class="card-horizontal">
<div class="imagen">
<img src="iconos/docente_lineal.svg" alt="">
</div>
<div class="card-body">
<h2>Título Mediano de dos lineas máximo</h2>
<div class="chips-container-row">
<span class="chips-primario">Chips 1</span>
<span class="chips-primario">Chips 2</span>
</div>
</div>
</div>
</a>
CSS
.card-horizontal {
align-items: center;
display: flex;
flex-wrap: nowrap;
padding: 20px;
gap: 20px;
width: 400px;
height: auto;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
.card-horizontal:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-horizontal:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-horizontal .imagen {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 104px !important;
width: 110px !important;
min-width: 110px !important;
background-color: #FCEDED;
border-radius: 5px;
padding: 9px 10px;
max-width: unset !important;
}
.card-horizontal .imagen img {
height: 70px !important;
width: 70px !important;
}
.card-horizontal .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-horizontal .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #024588;
mix-blend-mode: normal;
}
.card-horizontal .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
JS
Tarjeta pequeña con descripción y chip
HTML
<a href="#" style="text-decoration: none;">
<div class="card-secundaria-small">
<div class="card-body">
<h2>Titulo para tarjeta pequeña</h2>
</div>
<div class="card-actions" style="justify-content: flex-start;">
<span class="chips-primario-icono">Acción <img
src="iconos/flecha-derecha-border.svg" alt="" width="32px"
height="32px"></span>
</div>
</div>
</a>
CSS
.card-secundaria-small {
display: flex;
flex-direction: column;
padding: 20px 20px 30px;
gap: 30px;
width: 186px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
transition: box-shadow 200ms;
-webkit-transition: box-shadow 200ms;
}
|
.card-secundaria-small:hover {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria-small:active {
box-shadow: 0px 3px 16px rgba(16, 15, 15, 0.2);
}
.card-secundaria-small .card-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.card-secundaria-small .card-body h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
}
.card-secundaria-small .card-body p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
mix-blend-mode: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-secundaria-small .card-actions {
display: flex;
justify-content: flex-end;
display: flex;
justify-content: center;
}
