Product Card

by Tiago Sousa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/lib.min.js"></script>
<li class="js-pagination-result">
  <product-card class="card card--product h-full card--no-lines relative flex">
    <div class="card__media image-blend relative">
      <!-- START OF PROMO CIRCLE -->

      <!-- +30 jours -->
      <!-- +60 jours -->
      <!-- +90 jours -->

      <!-- Vérifiez si le métachamp custom.ddm90 existe pour le produit -->

      <!-- PROMO FANTA -->

      <!-- END PROMO FANTA -->

      <!-- END OF PROMO CIRCLE -->

      <a
        href="/products/amos-4d-gummy-blocks-12-x-72g"
        aria-label="Amos 4D Gummy Blocks 12 x 72g"
        class="media block relative image-blend js-prod-link"
        style="padding-top: 100%"
        tabindex="-1"
        ><img
          data-srcset="//www.planet-foods.com/cdn/shop/files/amos-4d-gummy-letters-56385264288075_2015beca-16cb-443b-9850-f043538646c8.png?v=1735649585&amp;width=320 320w, //www.planet-foods.com/cdn/shop/files/amos-4d-gummy-letters-56385264288075_2015beca-16cb-443b-9850-f043538646c8.png?v=1735649585&amp;width=460 460w, //www.planet-foods.com/cdn/shop/files/amos-4d-gummy-letters-56385264288075_2015beca-16cb-443b-9850-f043538646c8.png?v=1735649585&amp;width=600 600w"
          sizes="(min-width: 1658px) calc((1530px - 96px) / 5), (min-width: 1280px) calc((100vw - 224px) / 5), (min-width: 769px) calc((100vw - 168px) / 4), (min-width: 600px) calc((100vw - 144px) / 3), calc((100vw - 52px) / 2)"
          data-src="//www.planet-foods.com/cdn/shop/files/amos-4d-gummy-letters-56385264288075_2015beca-16cb-443b-9850-f043538646c8.png?v=1735649585&amp;width=460"
          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20600'%3E%3C/svg%3E"
          class="img-fit img-fit--contain card__main-image no-js-hidden"
          data-media-id="63715494199674"
          loading="lazy"
          width="600"
          height="600"
          alt=""
          srcset="
...

CSS

ul {
  list-style: none;
}