Exemples de cartes

Les cartes sont un composant majeur en Bootstrap et permettent des affichages qu'on rencontre fréquemment sur le web.

Cartes dans un flex

Le flex permet de disposer des cartes côte à côte et d'avoir un certain niveau de réactivité.

Toutefois, le flex ne gère pas la taille des cartes.

Il faut alors que chaque carte gère sa largeur ce qui peut être problématique pour la réactivité.

Cartes en colonne sur écran mobile, puis côte à côte sur écran médium et plus

<!--Parent flex en colonne sur mobile puis en rangée sur écrans médium et plus, avec stretch sur enfants pour assurer une hauteur égale sur chaque carte-->
<!--La largeur de chaque carte est gérée par la taille de l'image de carte-->
<div id="jeux_grille" class="d-flex flex-column md:flex-row justify-content-evenly align-items-stretch">
    <div class="card">
        <img class="card-img-top" src="images/game1.jpg" 
            alt="Illustration du jeu Eclipse Protocol">
        <div class="card-body">
            <!--contenu texte de la carte-->
         </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="images/game2.png" 
            alt="Illustration du jeu Blood Kingdom">
        <div class="card-body">
            <!--contenu texte de la carte-->
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="images/game3.jpg" 
            alt="Illustration du jeu Totem Knight">
        <div class="card-body">
            <!--contenu texte de la carte-->            
        </div>
    </div>
</div>

Explications :

• Le flex gère le positionnement des cartes grâce au flex-column / flex-row et leur espacement grâce au gap
• Les cartes se laissent gérer par le flex en se partageant l'espace disponible entre elles

Taille des cartes

⚠️ La taille des cartes est déterminée par la taille de l'image.

La bonne pratique est donc d'avoir des images qui ont toutes la même taille pour une meilleure gestion de l'affichage et des ressources web.

Cartes dans une grille

La grille permet de disposer des cartes côte à côte en gérant l'espace disponible pour chacune d'elles.

Cartes en colonne sur écran mobile, puis côte à côte sur écran médium et plus

<!--Cartes dans un grille-->
<!--Grille de 3 colonnes sur écrans médium+ avec gutters pour l'espacement-->
<!--Les colonnes gèrent la largeur des cartes-->
<div id="jeux_grille" class="row g-9">
    <div class="md:col-4">
        <div class="card h-100">
            <img src="images/game1.jpg" class="card-img-top "
                alt="Illustration du jeu Eclipse Protocol">
            <div class="card-body ">
                <!--contenu texte de la carte--> 
            </div>
        </div>
    </div
    <div class="md:col-4">
        <div class="card h-100">
            <img src="images/game2.png" class="card-img-top "
                alt="Illustration du jeu Blood Kingdom">
            <div class="card-body">
               <!--contenu texte de la carte--> 
            </div>
        </div>
    </div
    <div class="md:col-4">
        <div class="card h-100">
            <img src="images/game3.jpg" class="card-img-top "
                alt="Illustration du jeu Totem Knight">
            <div class="card-body">
                <!--contenu texte de la carte--> 
            </div>
        </div>
    </div>
</div>

Explications :

• La taille des colonnes md-x permet de déterminer l'espace disponible par colonne.
• Une grille se divise en 12 fragments et si on dépasse, alors la prochaine colonne sera sur une autre ligne
• La classe h-100 sur les cartes permettent d'assurer que ces dernières aient toutes la même hauteur dans la grille

---

Cartes horizontales

Les cartes peuvent être horizontales (image à gauche, texte à droite).

Exemple :

<div class="card card-row ">
    <img src="images/fleur2.jpg" class="card-img-start" alt="Totem knight">
    <div class="card-body">
        <h4 class="card-title">Totem Knight</h4>
        <p class="card-text">Affronte la malédiction qui s'abbat sur ton village grâce à la magie emprisonnée dans
                    les totems des dieux anciens.</p>
        <p class="fw-bold fs-5">59,99 $</p>
        <a href="#" class="btn-solid theme-accent">
            Voir le jeu
         </a>
    </div>
</div>

Explications :

• La classe card-row indique que la carte s'affiche sur une rangée au lieu d'une colonne
• Attention: la taille de l'image détermine la taille de la carte!
• La carte prendra toujours 100% de la largeur à moins de la limiter avec un container, une grille, etc...

---

Et lorsqu'utilisées dans une grille, on reproduit l'affichage qu'on retrouve souvent sur plusieurs sites.

Exemple :

<div class="row">
    <div class="md:col-4">
        <div class="card card-row">
            <!--contenu de la carte-->
        </div>
        <div class="card card-row ">
            <!--contenu de la carte-->
        </div>
        <div class="card card-row ">
           <!--contenu de la carte-->
        </div>
    </div>
</div>

Cartes avec image de fond et superposition de contenu

Les cartes avec image de fond sont souvent utilisées pour créer des bannières qui attirent l'attention.

En jumelant la superposition d'un bloc de texte sur une image de carte, et le positionnement en flex, on peut alors créer des bannière de type "hero" qu'on retrouve énormément sur les sites de vente.

Exemple :

<div class="card ">
    <img class="card-img" src="images/banniere.jpg" alt="banniere">
    <div class="card-img-overlay d-flex justify-content-center align-items-center">
        <!--bloc de contenu superposé-->
    </div>
</div>

Explications :

• La classe card-img-overlay permet de créer une couche superposée sur l'image de la carte.
• Le flex permet de positionner le contenu de la carte sur l'image