carte · image · service
Version inversée : titre et texte en haut, image en bas. Utile pour varier le rythme visuel dans une grille de cartes.
<style>
.card-img-bottom {
max-width: 340px;
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.card-img-bottom__body {
padding: 1.25rem;
}
.card-img-bottom__title {
margin: 0 0 0.5rem;
font-size: 1.1rem;
color: #111;
}
.card-img-bottom__text {
margin: 0;
font-size: 0.9rem;
color: #666;
line-height: 1.6;
}
.card-img-bottom__image {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
</style>
<article class="card-img-bottom">
<div class="card-img-bottom__body">
<h3 class="card-img-bottom__title">Nom du service</h3>
<p class="card-img-bottom__text">Courte description de ce que propose ce service, en une ou deux phrases.</p>
</div>
<img src="https://placehold.co/400x220" alt="Image du service" class="card-img-bottom__image" />
</article>