Crea tu web, tutor html, css
Card básica

Las cards en HTML

Las cards (tarjetas en castellano) son bloques contenedores usados para albergar un contenido concreto. Suelen tener una estructura básica consistente en un título, un contenido y un pié. Además no ocupan toda la página sino que son un elemento diferenciado dentro del contendio de la misma.

El contenido principal de las cards puede ser tanto texto como elementos multimedia, como imágenes o videos. Y 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 tamibén puede desarrollarse prefectamente en un esquema horizontal.

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 llamda 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="/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 sofisticaicón introudcida 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 el enlace ocupa todo el pie.