Etat Pur Design System

Card Product Full Width 

<div class="relative h-full pt-20 md:pt-72 lg:pt-60 3xl:pt-80" style="background: url('/img/sliders/img_2.png') center/cover no-repeat;">

    <div class="container mx-auto h-full pb-72 md:pb-56 lg:pb-40 3xl:pb-60">
        <div class="flex h-full relative justify-start">

            <div class="flex flex-col gap-6 lg:gap-8 3xl:gap-10
                                      w-full md:w-1/2 z-10
                                              pl-4 md:pl-8
                                                    ">
                <div class="flex flex-col gap-4">
                    <h2 class="h2 [&>span]:font-normal">Titre avec <span>une longueur</span> réaliste pour un hero !</h2>

                    <p class="h5-base">
                        Sous-titre limité pour que tout aille bien.
                    </p>
                </div>

                <a href="#" type="button" class="self-start  btn  btn-dark  btn-solid  btn-size-lg">
                    Découvrir État Pur

                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="relative h-full pt-20 md:pt-72 lg:pt-60 3xl:pt-80"
     style="{% if item.background.mobile %}background: url('{{ item.background.mobile }}') center/cover no-repeat;{% endif %}"
>
    {% if item.background.desktop %}
        <div class="hidden md:block absolute inset-0 w-full h-full z-0 transition-opacity duration-300"
             style="background: url('{{ item.background.desktop }}') center/cover no-repeat;">
        </div>
    {% endif %}

    <div class="container mx-auto h-full pb-72 md:pb-56 lg:pb-40 3xl:pb-60">
        <div class="flex h-full relative {% if contentPosition == 'center' %}justify-center{% elseif contentPosition == 'right' %}justify-start{% else %}justify-start{% endif %}">

            {# Content Section #}
            <div class="flex flex-col gap-6 lg:gap-8 3xl:gap-10
                {% if contentPosition == 'center' %}
                      w-full md:w-2/3 text-center z-10
                {% else %}
                      w-full md:w-1/2 z-10
                    {% if contentPosition == 'left' %}
                          pr-4 md:pr-8
                    {% else %}
                          pl-4 md:pl-8
                    {% endif %}
                {% endif %}
                {% if contentPosition == 'right' %}md:ml-auto{% endif %}"
            >
                <div class="flex flex-col gap-4">
                    <h2 class="h2 [&>span]:font-normal">{{ item.title }}</h2>

                    <p class="h5-base">
                        {{ item.subtitle }}
                    </p>
                </div>

                {% if item.cta %}
                    {% render "@template-button" with {
                        href: item.cta.link,
                        label: item.cta.label,
                        color: "dark",
                        type: "solid",
                        button_class: (contentPosition == 'center' ? 'self-center' : 'self-start')
                    } %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "item": {
    "contentPosition": "left",
    "title": "Titre avec <span>une longueur</span> réaliste pour un hero !",
    "subtitle": "Sous-titre limité pour que tout aille bien.",
    "cta": {
      "label": "Découvrir État Pur",
      "link": "#"
    },
    "background": {
      "mobile": "/img/sliders/img_2.png"
    }
  }
}

No notes defined.