Aller au contenu

Carte-image

Bannière représentant la bibliothèque Stylus Skeletonic

De la même manière, nous pouvons ajouter une image à notre élément de carte.

<section class="cards flex-12">
    <div class="card flex-4">
        <picture>
<img src="./assets/images/backgrounds/patrick-tomasso-472279.jpg"
    alt="Photo par Patrick Tomasso sur Unsplash" class="rdt">
        </picture>
        <div class="card-content text-left">
<h4>Image du haut</h4>
<p>Ça ne servira à rien, repris Prélude. J’ai en effet coupé toutes les communications vers l’extérieur.</p>
<p><button class="info center size-full-width">Bouton 1</button></p>
        </div>
    </div>
    <div class="card flex-4">
        <div class="card-content text-left">
<h4>Rembourrage central</h4>
<picture>
    <img src="./assets/images/backgrounds/fernando-reyes-241702.jpg"
        alt="Photo par Fernando Reyes sur Unsplash"
        class="img-responsive rd" />
</picture>
<p>Ça ne servira à rien, repris Prélude. J’ai en effet coupé toutes les communications vers l’extérieur.</p>
<p><button class="info center size-full-width">Bouton 3</button></p>
        </div>
    </div>
    <div class="card flex-4">
        <div class="card-content text-left">
<h4>Image du bas</h4>
<p>Ça ne servira à rien, repris Prélude. J’ai en effet coupé toutes les communications vers l’extérieur.</p>
<p><button class="info center size-full-width">Bouton 2</button></p>
        </div>
        <picture>
<img src="./assets/images/backgrounds/marion-michele-457471.jpg"
    alt="Photo par Marion Michele sur Unsplash" class="rdb">
        </picture>
    </div>
</section>