Etat Pur Design System

Corte ingles side panel (spanish website) 

<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 === 'corte-ingles')?.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 === 'corte-ingles')?.open" @click.outside="$store.asideBlocs.closeAside('corte-ingles')">
        <div class="font-medium h4 flex justify-between items-center mb-4">
            <span></span>
            <button type="button" @click="$store.asideBlocs.closeAside('corte-ingles')" 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-8">
                <div class="flex flex-col gap-4">
                    <h2 class="h4">Titre</h2>
                    <h3 class="h5 text-black/64">Texte de présentation</h3>
                </div>

                <div>
                    <a href="https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX" type="button" target="_blank" rel="noopenner noreferer" aria-label="Acheter (s'ouvre dans un nouvel onglet)" class="justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                        Acheter

                    </a>
                </div>
            </section>

        </div>
    </div>
</div>
 
{% embed "@side-panel" with panel|merge({sidePanelButton:panel.sidePanelButton|merge({label:(panel.sidePanelButton.label is defined ? panel.sidePanelButton.label|format(product_quantity|default('600')))})}) %}
    {% block content %}
        <section class="flex flex-col gap-8">
            <div class="flex flex-col gap-4">
                <h2 class="h4">Titre</h2>
                <h3 class="h5 text-black/64">Texte de présentation</h3>
            </div>

            <div>
                {% render "@template-button" with {
                    label: "Acheter",
                    href: "https://www.elcorteingles.pt/etat-pur/espaco-saude/?srsltid=AfmBOop60U5cTWirTysiQn4hxbRRlKwM7Nhn_WtcrmRpmsYByXW9BFPX",
                    external: true,
                    color: "dark",
                    type: "solid",
                    button_class: "justify-center",
                } %}
            </div>
        </section>
    {% endblock %}
{% endembed %}
 
{
  "panel": {
    "title": "",
    "sidePanelButton": false,
    "mobilePanel": "full",
    "showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'corte-ingles')?.open",
    "closeButtonAlpineClick": "$store.asideBlocs.closeAside('corte-ingles')"
  }
}

No notes defined.