Alain Afflelou Design System

Popular Terms 

<div class="inline-flex flex-col gap-4  text-neutral-500">
        <h2 class="font-semibold">Les recherches les plus populaires</h2>
        <div class="inline-flex flex-col gap-2">
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Prendre rendez-vous
                </a>
            </div>
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Magic Montures
                </a>
            </div>
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Magic clips
                </a>
            </div>
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Aides auditives
                </a>
            </div>
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Test auditif gratuit
                </a>
            </div>
            <div class="inline-flex gap-2 items-center text-neutral-800 ">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                </svg>
                <a href="#" class=" text-base">
                    Test de vue gratuit
                </a>
            </div>
        </div>

    </div>
 
{% set hasIcon = false %}
{% for link in links if not hasIcon and link.icon is defined %}
    {% set hasIcon = true %}
{% endfor %}

{% set links_content %}
    <div class="inline-flex flex-col gap-2">
        {% for link in links %}
            <div class="inline-flex gap-2 items-center text-neutral-800 {{ not link.icon and hasIcon ? 'ml-8' }}">
                {% if link.icon %}
                    {% render "@icons-" ~ link.icon.name|default("library--help") with link.icon %}
                {% endif %}
                {% render "@template-link" with link|merge({color:color}) %}
            </div>
            {% if link.informations %}
                <div class="{{ hasIcon ? 'ml-8' }}">
                    {% for information in link.informations %}
                        <p class="text-xs font-medium mt-2 first:mt-0 {{ color == 'light' ? 'text-neutral-300' : 'text-neutral-800' }}">{{ information }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endset %}

{% if accordion %}
    {% embed "@accordion--mobile-only" with {expanded: true} %}
        {% block content %}
            {{ links_content }}
        {% endblock %}
    {% endembed %}
{% else %}
    <div class="inline-flex flex-col gap-4 {{ footer_link_class }} {{ color == 'light' ? 'text-light-white' : 'text-neutral-500' }}">
        <h2 class="font-semibold">{{ title }}</h2>
        {{ links_content }}
    </div>
{% endif %}
 
{
  "title": "Les recherches les plus populaires",
  "links": [
    {
      "label": "Prendre rendez-vous",
      "icon": {
        "name": "library--arrow-right"
      }
    },
    {
      "label": "Magic Montures",
      "icon": {
        "name": "library--arrow-right"
      }
    },
    {
      "label": "Magic clips",
      "icon": {
        "name": "library--arrow-right"
      }
    },
    {
      "label": "Aides auditives",
      "icon": {
        "name": "library--arrow-right"
      }
    },
    {
      "label": "Test auditif gratuit",
      "icon": {
        "name": "library--arrow-right"
      }
    },
    {
      "label": "Test de vue gratuit",
      "icon": {
        "name": "library--arrow-right"
      }
    }
  ]
}

No notes defined.