Etat Pur Design System

Blog Menu Tag 

<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            get isMobile() {
                return this.$store.screen.isMobile ?? false;
            },
            toggleExpanded() {
                this.expanded = !this.isMobile || !this.expanded;
            }
        };
    }
</script>

<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !$store.screen.isMobile" class=" accordion-dark" aria-labelledby="accordion-2046132386">
    <div class="text-body-lg font-bold pb-4 border-b-4 border-brand-500">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text border-none" :aria-expanded="expanded" aria-controls="content-1169573984" id="accordion-2046132386">
            <span class="flex flex-wrap gap-2 ">
                <span aria-hidden="true">
                    <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="M9.56802 3H5.25C4.00736 3 3 4.00736 3 5.25V9.56802C3 10.1648 3.23705 10.7371 3.65901 11.159L13.2401 20.7401C13.9388 21.4388 15.0199 21.6117 15.8465 21.0705C17.9271 19.7084 19.7084 17.9271 21.0705 15.8465C21.6117 15.0199 21.4388 13.9388 20.7401 13.2401L11.159 3.65901C10.7371 3.23705 10.1648 3 9.56802 3Z" stroke="currentColor" stroke-width="1.5" fill="none" />
                        <path d="M6 6H6.0075V6.0075H6V6Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg> </span>
                Skin concern
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="md:hidden transition-transform" aria-hidden="true">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                </svg> </span>
        </button>
    </div>
    <div id="content-1169573984" x-cloak x-show="expanded || !$store.screen.isMobile" x-collapse class="pt-2">
        <div class="pt-2" :class="$store.screen.isMobile ? 'pb-4' : ''">
            <div class="flex flex-wrap gap-2">
                <a href="#" class="badge badge-corpo !font-normal">Signs of aging</a>
                <a href="#" class="badge badge-corpo !font-normal">Pimples & blemishes</a>
                <a href="#" class="badge badge-corpo !font-normal">Loss of radiance & hyperpigmentation</a>
                <a href="#" class="badge badge-corpo !font-normal">Dryness & urban stress</a>
                <a href="#" class="badge badge-corpo !font-normal">Hypersensitivity & redness</a>
                <a href="#" class="badge badge-corpo !font-normal">Cleansers</a>
                <a href="#" class="badge badge-corpo !font-normal">Moisturizers</a>
                <a href="#" class="badge badge-corpo !font-normal">Suncare</a>
            </div>

        </div>
    </div>
</div>
 
{% embed "@accordion--mobile-only" with {
    title: "Skin concern",
    expanded: true,
    accordion_button_class: "border-none",
    accordion_title_class: "text-body-lg font-bold pb-4 border-b-4 border-brand-500",
    accordion_content_class: "pt-2",
    color: 'dark',
    width: '24',
    height: '24',
    startIcon: {
        name: 'heroicons--tag-outline',
        size: 24,
        class: ''
    }
} %}
    {% block content %}
        <div class="flex flex-wrap gap-2">
            {% for item in items %}
                <a href="#" class="badge badge-corpo !font-normal">{{ item }}</a>
            {% endfor %}
        </div>
    {% endblock %}
{% endembed %}
 
{
  "items": [
    "Signs of aging",
    "Pimples & blemishes",
    "Loss of radiance & hyperpigmentation",
    "Dryness & urban stress",
    "Hypersensitivity & redness",
    "Cleansers",
    "Moisturizers",
    "Suncare"
  ]
}

No notes defined.