Alain Afflelou Design System

Product Cards 

<div class="flex flex-col gap-6 w-[960px] mx-auto">
    <span class="text-neutral-500 font-medium">Produits correspondant à votre recherche</span>
    <div class="flex flex-row gap-3">

        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
    </div>
    <div class="flex justify-center">
        <button type="button" class=" btn btn-dark btn-size-sm">
            Voir tous les produits

        </button>
    </div>
</div>
 
<div class="flex flex-col gap-6 w-[960px] mx-auto">
    <span class="text-neutral-500 font-medium">{{ title }}</span>
    <div class="flex flex-row gap-3">
        {# @TODO: Render product cards when available in DS #}
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
        <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
            <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
        </div>
    </div>
    <div class="flex justify-center">
        {% render "@template-button" with {
            color: "dark",
            size: "sm",
            label: "Voir tous les produits",
        } %}
    </div>
</div>
 
{
  "title": "Produits correspondant à votre recherche"
}

No notes defined.