Cards Product
Composition variations
Defines a product card with various compositions.
<div class="card cardProduct">
<div class="card__hover"></div>
<div class="card__img">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:\n16/9" alt="">
</figure>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">En stock</span>
</div>
</div>
<div>
<div class="price price--default price--standard">
<span class="price__currency">€</span><span class="price__amount">1389,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div><div class="card cardProduct">
<div class="card__hover"></div>
<div class="card__img">
<figure>
<img src="https://picsum.photos/1200/675?sky" alt="">
</figure>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--warning status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">Stock bas</span>
</div>
<div class="status-pill status-pill--highlight-secondary status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-discount-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="status-pill__label">Promo</span>
</div> </div>
<div>
<div class="price price--old price--small t-right">
<span class="price__currency">€</span><span class="price__amount">1389,99</span>
</div>
<div class="price price--highlight price--standard">
<span class="price__currency">€</span><span class="price__amount">1089,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>Cards products with slider
Cards products with slider
<div class="card cardProduct">
<div class="card__hover"></div>
<div class="card__img card__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure>
<img src="https://picsum.photos/1200/675?sand" alt="Alternative text" />
</figure>
</div>
<div class="swiper-slide">
<figure>
<img src="https://picsum.photos/1200/675?surf" alt="Alternative text" />
</figure>
</div>
</div>
<div class="swiper-pagination">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<div class="toolbar">
<button type="button" class="btn btn--secondary btn--icon btn--small btn-prev">
<span class="btn__content">
<span class="u-sr-accessible">Précédent</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<button type="button" class="btn btn--secondary btn--icon btn--small btn-next">
<span class="btn__content">
<span class="u-sr-accessible">Suivant</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">En stock</span>
</div>
<div class="status-pill status-pill--highlight-secondary status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-discount-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="status-pill__label">Promo</span>
</div> </div>
<div>
<div class="price price--default price--standard">
<span class="price__currency">€</span><span class="price__amount">19,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div><div class="card cardProduct">
<div class="card__hover"></div>
<div class="card__img card__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
</div>
<div class="swiper-pagination">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<div class="toolbar">
<button type="button" class="btn btn--secondary btn--icon btn--small btn-prev">
<span class="btn__content">
<span class="u-sr-accessible">Précédent</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<button type="button" class="btn btn--secondary btn--icon btn--small btn-next">
<span class="btn__content">
<span class="u-sr-accessible">Suivant</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">En stock</span>
</div>
<div class="status-pill status-pill--highlight-secondary status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-discount-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="status-pill__label">Promo</span>
</div> </div>
<div>
<div class="price price--default price--standard">
<span class="price__currency">€</span><span class="price__amount">19,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>Dark theme variations
<div class="card cardProduct card--light">
<div class="card__hover"></div>
<div class="card__img">
<figure>
<img src="https://picsum.photos/1200/675?sea" alt="">
</figure>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">En stock</span>
</div>
</div>
<div>
<div class="price price--default price--standard">
<span class="price__currency">€</span><span class="price__amount">1389,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div><div class="card cardProduct card--light">
<div class="card__hover"></div>
<div class="card__img card__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
<div class="swiper-slide">
<figure>
<img src="https://placehold.co/1200x675?text=Ratio:
16/9" alt="Alternative text" />
</figure>
</div>
</div>
<div class="swiper-pagination">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<div class="toolbar">
<button type="button" class="btn btn--secondary btn--icon btn--small btn-prev">
<span class="btn__content">
<span class="u-sr-accessible">Précédent</span>
<div class="svg-icon svg-icon-arrow-left-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-left-1"><path id="Vector" d="M16.2501 23.25L5.53006 12.53C5.46039 12.4604 5.40513 12.3778 5.36742 12.2869C5.32971 12.1959 5.3103 12.0984 5.3103 12C5.3103 11.9016 5.32971 11.8041 5.36742 11.7131C5.40513 11.6222 5.46039 11.5396 5.53006 11.47L16.2501 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
<button type="button" class="btn btn--secondary btn--icon btn--small btn-next">
<span class="btn__content">
<span class="u-sr-accessible">Suivant</span>
<div class="svg-icon svg-icon-arrow-right-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-right-1"><path id="Vector" d="M5.5 0.75L16.22 11.47C16.2897 11.5396 16.3449 11.6222 16.3826 11.7131C16.4203 11.8041 16.4398 11.9016 16.4398 12C16.4398 12.0984 16.4203 12.1959 16.3826 12.2869C16.3449 12.3778 16.2897 12.4604 16.22 12.53L5.5 23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>
</div>
<a href="/" class="card__body true-link">
<h4 class="card__title card__title"> Titre de la carte </h4>
<div class="card__commercialInfo">
<div class="card__status">
<div class="status-pill status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-controls-stop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="controls-stop"><path id="Vector" d="M18.75 3.75H5.25C4.42157 3.75 3.75 4.42157 3.75 5.25V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V5.25C20.25 4.42157 19.5784 3.75 18.75 3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
<span class="status-pill__label">En stock</span>
</div>
<div class="status-pill status-pill--highlight-secondary status-pill--small p">
<div class="svg-icon svg-icon--small svg-icon-discount-circle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="discount-circle" clip-path="url(#clip0_3_2771)"><path id="Vector" d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M8.25 15.75L15.75 8.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M15 16.5C15.8284 16.5 16.5 15.8284 16.5 15C16.5 14.1716 15.8284 13.5 15 13.5C14.1716 13.5 13.5 14.1716 13.5 15C13.5 15.8284 14.1716 16.5 15 16.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2771"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="status-pill__label">Promo</span>
</div> </div>
<div>
<div class="price price--default price--standard">
<span class="price__currency">€</span><span class="price__amount">19,99</span>
</div> </div>
</div>
<p class="card__paragraph card__paragraph">Ce produit a été conçu avec une attention particulière portée aux détails et à la qualité des matériaux. Sa conception ergonomique assure une prise en main agréable et un confort d’utilisation optimal.</p>
</a>
<div class="card__footer">
<button type="button" class="btn btn--primary btn--small">
<span class="btn__content">
<div class="svg-icon svg-icon-shopping-cart-upload">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="shopping-cart-upload" clip-path="url(#clip0_3_3281)"><path id="Vector" d="M0.75 17.25H16.671C17.0255 17.25 17.3685 17.1245 17.6392 16.8956C17.91 16.6668 18.0909 16.3495 18.15 16L20.787 2C20.8461 1.65048 21.027 1.33318 21.2978 1.10436C21.5685 0.875547 21.9115 0.750005 22.266 0.75H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M4.875 23.25C5.91053 23.25 6.75 22.4105 6.75 21.375C6.75 20.3395 5.91053 19.5 4.875 19.5C3.83947 19.5 3 20.3395 3 21.375C3 22.4105 3.83947 23.25 4.875 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_3" d="M14.625 23.25C15.6605 23.25 16.5 22.4105 16.5 21.375C16.5 20.3395 15.6605 19.5 14.625 19.5C13.5895 19.5 12.75 20.3395 12.75 21.375C12.75 22.4105 13.5895 23.25 14.625 23.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_4" d="M9.75 2.75V12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_5" d="M9.75 12.75L6 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_6" d="M9.75 12.75L13.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_3281"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
</div>
<span class="btn__label">Ajouter au panier</span>
</span>
</button>
<button type="button" class="btn btn--like btn--icon btn--small">
<span class="btn__content">
<span class="u-sr-accessible">Ajouter aux favoris</span>
<div class="svg-icon svg-icon-love-it">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="love-it"><path id="Vector" d="M12 21.844L2.41202 11.844C1.56935 11.002 1.01318 9.91609 0.82238 8.74023C0.631579 7.56437 0.815836 6.35828 1.34902 5.29303C1.75108 4.48915 2.33839 3.7923 3.06257 3.25991C3.78674 2.72752 4.62706 2.37483 5.51427 2.23088C6.40149 2.08693 7.31021 2.15586 8.16557 2.43198C9.02092 2.70809 9.79843 3.1835 10.434 3.81903L12 5.38403L13.566 3.81903C14.2016 3.1835 14.9791 2.70809 15.8345 2.43198C16.6898 2.15586 17.5985 2.08693 18.4858 2.23088C19.373 2.37483 20.2133 2.72752 20.9375 3.25991C21.6617 3.7923 22.249 4.48915 22.651 5.29303C23.1835 6.35787 23.3674 7.56324 23.1768 8.73843C22.9862 9.91362 22.4307 10.9991 21.589 11.841L12 21.844Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
</div>
</span>
</button>
</div>
</div>List of arguments for cards product
| Argument | Type | Description | Possible Values |
|---|---|---|---|
| img | string | The URL of the product image. | — |
| title | string | The title of the product. | — |
| title-level | number | The HTML heading level for the product title. | 1, 2, 3, 4, 5, 6 |
| content | string | A brief description or content about the product. | — |
| stock | boolean or string | Indicates the status of the stock. | 1, warning, error, highlight-primary, highlight-secondary |
| stock-message | string | The message to explicit the stock status. | — |
| in-promo | string | Indicates whether the product is on promotion. | highlight |
| price | string | The price of the product. | — |
| price-promo | string | The promotional price of the product, if applicable. | — |
| icons-list | array | An array of icon names to display as features or highlights of the product (e.g., ['eco', 'recycle', 'discount-circle']). | — |
| href | string | The URL to the product page. | — |
| btn-size | array | Defines the size of the button. | default, small |
| lightbox | boolean | Indicates whether the product image should open in a lightbox when clicked. | — |
| theme | string | Specifies the theme of the product card. | — |
| additional-classes | string | Custom CSS classes for styling extensions. | — |