Etat Pur Design System

Product Bundle 

<section class="flex flex-col gap-3 py-6 lg:py-8 3xl:py-18 bg-neutral-50">
    <div class="container text-body-lg font-bold text-black/64">
        <h3>Les produits inclus dans cette offre</h3>
    </div>
    <div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 3xl:gap-5">
        <div class="flex items-center bg-white">
            <div class="flex-shrink-0 overflow-hidden h-full aspect-[10/12]">
                <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=64,height=77,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
            </div>
            <div class="text-body-sm p-2">
                <h4 class="font-bold">La mousse nettoyante</h4>
                <p class="line-clamp-1">Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
            </div>
        </div>
        <div class="flex items-center bg-white">
            <div class="flex-shrink-0 overflow-hidden h-full aspect-[10/12]">
                <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=64,height=77,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
            </div>
            <div class="text-body-sm p-2">
                <h4 class="font-bold">La mousse nettoyante</h4>
                <p class="line-clamp-1">Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
            </div>
        </div>
        <div class="flex items-center bg-white">
            <div class="flex-shrink-0 overflow-hidden h-full aspect-[10/12]">
                <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=64,height=77,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
            </div>
            <div class="text-body-sm p-2">
                <h4 class="font-bold">La mousse nettoyante</h4>
                <p class="line-clamp-1">Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
            </div>
        </div>
        <div class="flex items-center bg-white">
            <div class="flex-shrink-0 overflow-hidden h-full aspect-[10/12]">
                <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=64,height=77,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
            </div>
            <div class="text-body-sm p-2">
                <h4 class="font-bold">La mousse nettoyante</h4>
                <p class="line-clamp-1">Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
            </div>
        </div>
    </div>
</section>
 
<section class="flex flex-col gap-3 py-6 lg:py-8 3xl:py-18 bg-neutral-50">
    <div class="container text-body-lg font-bold text-black/64">
        <h3>{{ title }}</h3>
    </div>
    <div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 3xl:gap-5">
        {% for product in products %}
            <div class="flex items-center bg-white">
                <div class="flex-shrink-0 overflow-hidden h-full aspect-[10/12]">
                    <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=64,height=77,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
                </div>
                <div class="text-body-sm p-2">
                    <h4 class="font-bold">La mousse nettoyante</h4>
                    <p class="line-clamp-1">Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
                </div>
            </div>
        {% endfor %}
    </div>
</section>
 
{
  "title": "Les produits inclus dans cette offre",
  "products": [
    {},
    {},
    {},
    {}
  ]
}

No notes defined.