Alain Afflelou Design System

Store Card 

<div class="overflow-hidden">
    <img src="/img/newletter-img.jpeg" alt="Magasin ALAIN AFFLELOU" class="w-full object-cover aspect-square rounded-lg" />

    <div class="p-4">
        <address class="text-neutral-800 font-medium not-italic mb-2">
            59 boulevard Jean Jaurès<br>
            92110, Clichy
        </address>

        <div class="flex items-center gap-2 text-sm text-neutral-800">
            <span class="text-green-600 font-medium">Ouvert</span>
            <span class="">· Ferme à 19:00</span>
        </div>
    </div>
</div>
 
<div class="overflow-hidden">
    {% if slide.image %}
        <img
                src="{{ slide.image }}"
                alt="Magasin {{ slide.name }}"
                class="w-full object-cover aspect-square rounded-lg"
        />
    {% endif %}

    <div class="p-4">
        {% if slide.address %}
            <address class="text-neutral-800 font-medium not-italic mb-2">
                {{ slide.address.street }}<br>
                {{ slide.address.postcode }}, {{ slide.address.city }}
            </address>
        {% endif %}

        <div class="flex items-center gap-2 text-sm text-neutral-800">
            <span class="text-green-600 font-medium">{{ slide.status }}</span>
            {% if slide.openUntil %}
                <span class="">· {{ slide.openUntil }}</span>
            {% endif %}
        </div>
    </div>
</div>
 
{
  "slide": {
    "image": "/img/newletter-img.jpeg",
    "name": "ALAIN AFFLELOU",
    "address": {
      "street": "59 boulevard Jean Jaurès",
      "postcode": "92110",
      "city": "Clichy"
    },
    "status": "Ouvert",
    "openUntil": "Ferme à 19:00"
  }
}

No notes defined.