Alain Afflelou Design System

Store Info Card: Image Only 

<div x-ref="contentBlock" class="grid  h-full md:gap-8 bg-dark-5 rounded-lg overflow-hidden">
    <div class="relative  grid ">
        <img src="/img/newletter-img.jpeg" alt="" class="w-full h-full object-cover" />
    </div>

</div>
 
<div x-ref="contentBlock" class="grid {% if slide.variant == 'default' %} grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 {% endif %} h-full md:gap-8 bg-dark-5 rounded-lg overflow-hidden">
    {% if slide.variant != 'text-only' %}
        <div class="relative {% if slide.variant != 'image-only' %} aspect-square md:aspect-auto {% else %} grid {% endif %}">
            {% if slide.image %}
                <img
                        src="{{ slide.image }}"
                        alt="{{ slide.name }}"
                        class="w-full h-full object-cover"
                />
            {% endif %}
        </div>
    {% endif %}

    {% if slide.variant != 'image-only' %}
        <div class="flex flex-col justify-center p-8 md:p-12">
            <h2 class="text-3xl font-medium text-neutral-900 mb-4">{{ slide.title }}</h2>
            <p class="text-neutral-600 text-lg mb-8">{{ slide.description }}</p>

            {% if slide.cta %}
                {% render "@template-button" with {
                    color: "dark-ghost",
                    type: "leading-icon",
                    label: "Réserver un essayage",
                    icon: {
                        name: "library--calendar"
                    },
                    button_class: "w-fit"
                } %}
            {% endif %}
        </div>
    {% endif %}
</div>
 
{
  "slide": {
    "variant": "image-only",
    "image": "/img/newletter-img.jpeg",
    "title": "Needle yet value-added first product strategic loss",
    "description": "Launch optimize charts post bells algorithm low-hanging hear.",
    "cta": {
      "label": "Réserver un essayage"
    }
  }
}

No notes defined.