Créer une card produit style Asos

Nous utiliserons des éléments Bootstrap 4 tels que Flexbox, le composant card ou encore le bouton toggle.
Découvrez ci-dessous le résultat final :

Création de la structure

Notre conteneur principal utilisera la classe .container-fluid et intégrera respectivement les div .row et 2 div .col-6 (dans cet exemple, nous utilisons 2 produits par ligne).

<div class="container-fluid">
 <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
 </div><!-- /row -->
</div><!-- /container -->

Une fois la structure réalisée, il est bon de penser au responsive design et à l’adaptation mobile de notre grille. Pour ce faire, nous allons définir notre grille sur 2 colonnes jusqu’à l’affichage small. Lorsque l’écran passe sur un rendu extra-small, une seule colonne sera utilisée.

<div class="container-fluid">
 <div class="row my-3">
    <div class="col-12 col-sm-6 my-3 my-sm-0"></div>
    <div class="col-12 col-sm-6 my-3 my-sm-0"></div>
 </div><!-- /row -->
</div><!-- /container -->

Intégration du composant card

L’élément .card est composé d’une image, d’un conteneur .card-body intégrant respectivement un titre et un paragraphe.

Le titre utilise un <h5> et intègre une balise utilise un <small> . Le paragraphe quant à lui sert à mettre en forme le prix du produit. Dans cet exemple, le produit bénéficie d’une promotion et nous utilisons respectivement la classe .text-danger sur le nouveau prix et une div <del> pour barrer l’ancien prix.

<div class="container-fluid">
 <div class="row my-3">
    <div class="col-12 col-sm-6 my-3 my-sm-0">
       <div class="card">
         <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
         <div class="card-body">
            <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5>
            <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p>
         </div><!-- /card-body -->
       </div><!-- /card-->
    </div><!-- /col -->
  </div><!-- /row -->
</div><!-- /container -->

Intégration du bouton like

Cette intégration nécessite dans un premier temps la mise en place d’une div .card-img-overlay. Cela va nous permettre de positionner le bouton « like » par dessus notre card. Le bouton « like » sera matérialisé par un bouton de type toggle qui permet de rester cliqué lorsque l’utilisateur l’active avec le paramètre HTML5 aria-pressed.

<div class="card">
   <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
   <div class="card-img-overlay">
      <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off">
         <i class="far fa-heart"></i>
      </button>
   </div><!-- /card-img-overlay -->
   <div class="card-body">
      <h5 class="card-title"><small>Nike - Air Max 90 - Baskets en cuir - Bleu 302519-400</small></h5>
      <p class="card-text"><strong class="text-danger">111,49 €</strong> <del>139,99 €</del></p>
   </div><!-- /card-body -->
</div><!-- /card-->

Acheter et vendre des cryptomonnaies

Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.

Acheter sur Coinbase

Ajuster le positionnement avec Flexbox

Après avoir intégré la fonction d’overlay sur notre card, nous devons le positionner au bon endroit : en bas à droite de l’image produit.
Pour ce faire, nous utiliserons les alignements flexbox.

<div class="card-img-overlay d-flex justify-content-end align-items-end">
   <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off">
      <i class="far fa-heart"></i>
   </button>
</div><!-- /card-img-overlay -->

la classe .d-flex permet d’appliquer un display: flex; à notre conteneur.
Les casses .justify-content-end et .align-items-end permettent respectivement de positionner le bouton « like » à la fin du contenu vertical (en bas) et horizontal (à droite).

Astuce de positionnement

Après cette manipulation flexbox, on s’aperçoit que le contenu se positionne tout en bas de la card produit et non sur l’image. Ce problème est lié à notre classe .card-img-overlay qui englobe l’intégralité de la card.

Pour remédier à ce problème, il nous suffit d’englober la div image ainsi que la div .card-img-overlay dans un conteneur utilisant la classe .position-relative. Cela permettra d’appliquer la fonction d’overlay uniquement à l’image de notre card produit.

<div class="position-relative">
   <img src="https://images.asos-media.com/products/nike-air-max-90-baskets-en-cuir-bleu-302519-400/9536548-1-blue?$n_640w$&amp;wid=634&amp;fit=constrain" class="card-img-top" alt="Nike - Air Max 90">
   <div class="card-img-overlay d-flex justify-content-end align-items-end">
      <button type="button" class="btn btn-light rounded-circle" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="far fa-heart"></i></button>
   </div>
</div>

Un peu de couleurs

Bien entendu, pour coller le plus possible au « look » du site Asos, nous devons appliquer quelques corrections CSS.

.card {border: 0;}
.card-body {padding: .5rem 0; font-size: 14px;}
.card-title small {font-size: 14px; font-weight: 200;}
.card-text del {font-weight: 200;}
.card-img-overlay button i {font-weight: normal;}
.btn {  padding: .75rem; line-height: 1;}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
  background-color: black;
  color: white;
}

Résultat final

Développez vos compétences digitales

Apprenez Bootstrap aux côtés d’experts et artistes passionnés sur tuto.com, une plateforme de formation au digital.

Visiter Tuto.com