Etat Pur Design System

Links 

<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            isTablet: false,
            init() {
                this.checkExpand();
            },
            toggleExpanded() {
                this.expanded = !this.isTablet || !this.expanded;
            },
            checkExpand() {
                this.isTablet = window.innerWidth < 1024;
                // Initialize expanded to false so that it is closed by default.
                this.expanded = false
            }
        };
    }
</script>

<div x-data="accordion(false)" @resize.debounce.100.window="expanded = !isTablet; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-526655802">
    <div class="font-bold text-body-base">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full lg:cursor-text " :class="isTablet ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-1841752241" id="accordion-526655802">
            <span class="flex flex-wrap gap-2 ">
                Plan du site
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="lg: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 x-cloak x-show="expanded || !isTablet" x-collapse class="" id="content-1841752241">
        <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
            <div :class="isTablet ? 'pb-3' : ''">
                <ul class="inline-flex flex-col gap-2">
                    <li>
                        <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                            Prendre soin de ma peau

                        </a>
                    </li>
                    <li>
                        <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                            Traiter ma peau

                        </a>
                    </li>
                    <li>
                        <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                            Comprendre la peau

                        </a>
                    </li>
                    <li>
                        <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                            Diagnositic

                        </a>
                    </li>
                    <li>
                        <a href="#" class="
        
         link-medium
         link-light
        
        
    ">

                            Pourquoi Etat pur

                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
 
{% set links_content %}
    <ul class="inline-flex flex-col gap-2">
        {% for link in links %}
            <li>
                {% render "@template-link" with link|merge({color:color, size: "medium"}) %}
            </li>
        {% endfor %}
    </ul>
{% endset %}

{% if accordion %}
    {% embed "@accordion--mobile-tablet" with {expanded: false, accordion_title_class: "font-bold text-body-base", color: type} %}
        {% block content %}
            {{ links_content }}
        {% endblock %}
    {% endembed %}
{% else %}
    <div class="inline-flex flex-col gap-6 {{ footer_link_class }} {{ type == 'light' ? 'text-white' : 'text-black' }}">
        <div class="font-semibold">{{ title }}</div>
        {{ links_content }}
    </div>
{% endif %}
 
{
  "accordion": true,
  "color": "light",
  "title": "Plan du site",
  "links": [
    {
      "label": "Prendre soin de ma peau",
      "type": "light"
    },
    {
      "label": "Traiter ma peau",
      "type": "light"
    },
    {
      "label": "Comprendre la peau",
      "type": "light"
    },
    {
      "label": "Diagnositic",
      "type": "light"
    },
    {
      "label": "Pourquoi Etat pur",
      "type": "light"
    }
  ]
}

Footer links guide

How to use

Import

{% render "@footer-links" with {...} %}

Available props

  • title: string | default: Plan du site
  • footer_link_class: string | default: null
  • color: light, dark | default: dark
  • links: array | default: []
    • See link documentation