Etat Pur Design System

Clinical Results 

<div class="container max-md:pe-0 grid-layout items-center py-6">
    <div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
        <div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
        <div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" @click.outside="$store.asideBlocs.closeAside('ingredients')">
            <div class="font-medium h4 flex justify-between items-center mb-4">
                <span></span>
                <button type="button" @click="$store.asideBlocs.closeAside('ingredients')" aria-label="Label text" class=" btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>

                </button>
            </div>
            <div class="overflow-auto flex-1">
                <section class="flex flex-col gap-4">
                    <div class="flex flex-col gap-2">
                        <h2 class="h4">Exemple de titre</h2>
                        <h3 class="h5 text-black/64">Sous titre</h3>
                    </div>

                    <div class="flex flex-col gap-2">
                        <h4 class="text-body-lg font-bold">Sous sous titre</h4>
                        <div class="text-body-base space-y-2.5">
                            <p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
                            <p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
                            <p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
                            <p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
                        </div>
                    </div>

                    <div class="flex flex-col gap-2">
                        <h4 class="text-body-lg font-bold">Sous sous titre</h4>
                        <div class="text-body-base">
                            <p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
                            <p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
                            <p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
                            <p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
    <section class="w-full flex flex-col gap-3 sm:col-start-2 col-span-10">
        <h2 class="text-body-lg font-bold text-black/56">Résultats cliniques</h2>

        <div class="relative">
            <div class="flex flex-row gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-width">
                <div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
                    <div class="absolute inset-0 z-0 bg-white/92 group-hover:bg-white/100"></div>

                    <div class="relative z-10 flex flex-col h-full">
                        <div class="flex-1 flex flex-col justify-center">
                            <div class="h1">+46%</div>
                            <div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
                        </div>

                        <div class="text-body-xs flex flex-row gap-1 w-max">
                            <sup class="leading-loose">(1)</sup>
                            <button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
                                en savoir +
                                <svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
                    <div class="absolute inset-0 z-0 bg-white/84 group-hover:bg-white/92"></div>

                    <div class="relative z-10 flex flex-col h-full">
                        <div class="flex-1 flex flex-col justify-center">
                            <div class="h1">+35%</div>
                            <div class="h5">de fermeté<sup class="ml-1 text-body-xs">(1)</sup></div>
                        </div>

                        <div class="text-body-xs flex flex-row gap-1 w-max">
                            <sup class="leading-loose">(1)</sup>
                            <button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
                                en savoir +
                                <svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
                    <div class="absolute inset-0 z-0 bg-white/76 group-hover:bg-white/84"></div>

                    <div class="relative z-10 flex flex-col h-full">
                        <div class="flex-1 flex flex-col justify-center">
                            <div class="h1">+20%</div>
                            <div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
                        </div>

                        <div class="text-body-xs flex flex-row gap-1 w-max">
                            <sup class="leading-loose">(1)</sup>
                            <button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
                                en savoir +
                                <svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
                    <div class="absolute inset-0 z-0 bg-white/68 group-hover:bg-white/76"></div>

                    <div class="relative z-10 flex flex-col h-full">
                        <div class="flex-1 flex flex-col justify-center">
                            <div class="h1">+60%</div>
                            <div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
                        </div>

                        <div class="text-body-xs flex flex-row gap-1 w-max">
                            <sup class="leading-loose">(1)</sup>
                            <button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
                                en savoir +
                                <svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
 
<div class="container max-md:pe-0 grid-layout items-center py-6">
    {% render "@pdp-ingredients" %}
    <section class="w-full flex flex-col gap-3 sm:col-start-2 col-span-10">
        <h2 class="text-body-lg font-bold text-black/56">Résultats cliniques</h2>

        <div class="relative">
            <div class="flex flex-row gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-width">
                {% for result in results %}
                    <div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
                        <div class="absolute inset-0 z-0 {{ result.overlay|default('bg-white/04') }} {{ result.overlayHover|default('group-hover:bg-white/04') }}"></div>

                        <div class="relative z-10 flex flex-col h-full">
                            <div class="flex-1 flex flex-col justify-center">
                                <div class="h1">+{{ result.percentage }}%</div>
                                <div class="h5">{{ result.type }}{% if result.footnote %}<sup class="ml-1 text-body-xs">({{ result.footnote }})</sup>{% endif %}</div>
                            </div>

                            {% if result.footnote %}
                                <div class="text-body-xs flex flex-row gap-1 w-max">
                                    <sup class="leading-loose">({{ result.footnote }})</sup>
                                    <button
                                            type="button"
                                            class="flex gap-1 font-bold group"
                                            x-data
                                            x-init="$store.asideBlocs.addAside('ingredients')"
                                            @click="$store.asideBlocs.toggleAside('ingredients')"
                                    >
                                        en savoir +
                                        <svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
                                        </svg>
                                    </button>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
</div>
 
{
  "results": [
    {
      "percentage": 46,
      "overlay": "bg-white/92",
      "overlayHover": "group-hover:bg-white/100",
      "type": "d'éclat",
      "footnote": "1"
    },
    {
      "percentage": 35,
      "overlay": "bg-white/84",
      "overlayHover": "group-hover:bg-white/92",
      "type": "de fermeté",
      "footnote": "1"
    },
    {
      "percentage": 20,
      "overlay": "bg-white/76",
      "overlayHover": "group-hover:bg-white/84",
      "type": "d'éclat",
      "footnote": "1"
    },
    {
      "percentage": 60,
      "overlay": "bg-white/68",
      "overlayHover": "group-hover:bg-white/76",
      "type": "d'éclat",
      "footnote": "1"
    }
  ]
}

No notes defined.