Alain Afflelou Design System

Text Image 

<div class="relative bg-neutral-150 rounded-lg flex flex-wrap items-end lg:justify-between overflow-hidden">
    <div class="sm:w-1/2 p-8 md:p-20 text-neutral-800 z-10 md:pr-0">
        <h2 class="text-3xl md:text-4xl">
            Rendez-vous opticien en visio
        </h2>
        <p class="mt-4 text-xl">
            Découvrez notre service gratuit visio-conférence pour qu'un conseiller vous aide dans votre choix de monture.
        </p>
        <div class="mt-8">
            <a href="#" class=" btn btn-dark-subtle ">
                Je découvre

            </a>
        </div>
    </div>
    <img src="../../img/textImage/textimg1.png" alt="Alt" class="w-full  sm:w-1/2 ">
</div>
 
<div
        class="relative bg-neutral-150 rounded-lg flex flex-wrap items-end lg:justify-between overflow-hidden"
>
    <div class="sm:w-1/2 p-8 md:p-20 text-neutral-800 z-10 {% if isFullImageBackground is defined and isFullImageBackground == false %}md:pr-0{% endif %}">
        <h2 class="text-3xl md:text-4xl">
            {{ title }}
        </h2>
        <p class="mt-4 text-xl">
            {{ description }}
        </p>
        <div class="mt-8">
            {% render "@template-button" with {
                color: buttonColor,
                label: buttonText,
                href: buttonUrl
            } %}
        </div>
    </div>
    <img
        src="{{ image.src|path }}"
        alt="{{ image.alt }}"
        class="w-full {% if isFullImageBackground is defined and isFullImageBackground == false %} sm:w-1/2 {% else %} absolute inset-0 h-full object-cover z-0{% endif %}"
    >
</div>
 
{
  "isFullImageBackground": false,
  "title": "Rendez-vous opticien en visio",
  "description": "Découvrez notre service gratuit visio-conférence pour qu'un conseiller vous aide dans votre choix de monture.",
  "buttonText": "Je découvre",
  "buttonUrl": "#",
  "buttonColor": "dark-subtle",
  "image": {
    "src": "/img/textImage/textimg1.png",
    "alt": "Alt"
  }
}

No notes defined.