Las cards en HTML
Las cards (tarjetas en castellano) son bloques contenedores usados para albergar un contenido muy concreto. La estructura básica de las cards consiste en
- título, algo descriptivo como: domicilio, presentación...
- contenido, puede incluir una imagen y/o un texto con la información
- pié: puede contener un enlace para ampliar información
Además las cards no ocupan toda la página, sino que son un elemento diferenciado dentro del contenido de la misma. Una forma de mostrar en poco espacio información sufuciente sobre algo muy específico: ima oferta, un modelo....
El contenido principal de las cards puede ser tanto texto como elementos multimedia, como imágenes o videos.
Y las cards pueden contener también enlaces para recursos relacionados, estos enlaces suelen colarse en la sección del pie.
Por su estructura y porque los diseños se hacen pensando en las pantallas de los móviles, las cards suelen desarrollarse siguiendo un esquema vertical, en una columna. Aunque también puede desarrollarse prefectamente en un esquema horizontal.
En la sección de ejercicios tienes una colección de ejemplos resueltos sobre cards
Otros diseños derivados que pueden interesarte
El código HTML
Como vemos una card básica posee un contenedor en cuyo interior se colocan tres bloques: uno para el título otro para el cuerpo o contenido y otra para el pie.
En este ejemplo básico el contenido va a ser una imagen con un pequeño texto, y el pie será una llamada con un enlace para ampliar información.
El código HTML queda:
<div class="tarjeta">
<div class="titulo">Una tarjeta básica</div>
<div class="cuerpo">
<img src="/como_se_hace/imgs/cards0-img.jpg" alt="muestra">
lorem ipsum
</div>
<div class="pie">
<a href="#">Más información</a>
</div>
</div>
El estilo CSS
Una vez tienes el esquema de la tarjeta solo queda aplicarle los estilos CSS que le darán el aspecto que buscamos: un título arriba, un bloque cuerpo en el centro y un pie. La vamos a poner un ancho fijo de 450px, que se adapta bien a cualquier pantalla. No entramos en el aspecto responsive, este va a depender más de la página donde coloquemos la tarjeta. Puedes ver el resultado aquí
@charset "utf-8";
.tarjeta{
display:flex;
flex-direction:column;
justify-content:space-between;
width:420px;
border: 1px solid lightgray;
box-shadow: 2px 2px 8px 4px #d3d3d3d1;
border-radius:15px;
font-family: sans-serif;
}
.titulo{
font-size: 24px;
padding: 10px 10px 0 10px;;
}
.cuerpo{
padding: 10px;
}
.pie{
background: #6699ff;
border-radius:0 0 15px 15px;
padding: 10px;
text-align:center;
}
.pie a{
text-decoration: none;
color: white;
}
.pie a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: ""
}
Como ves el layout está basado en flex. La única sofisticación introducida en este esquema es hacer que todo el pié actúe como enlace, para lo cual se ha utilizado un pseudo selector ::after que introduce un bloque vacío en el link <a>, el bloque ocupa todo el pie (con position relative para que esto funcione) y por tanto al pulsar cualquier parte del pie (no solo el texto ancla) se activa el enlace.