Etat Pur Design System

Text/Image offset Cards 

<article class="mx-auto w-full md:w-1/2">
    <div class="">
        <img src="/img/card_text/img_2.png" alt="Title" class="object-cover object-center aspect-video w-full h-full" loading="lazy" />
    </div>

    <div class="relative mx-6 lg:mx-8 -mt-20">
        <div class="flex flex-col justify-start items-start gap-4 px-6 py-8 bg-white shadow-16 hover:shadow-32 hover:shadow-black/08 transition-all duration-300">
            <h2 class="h3 mb-4">Title</h2>
            <p class="text-body-base mb-8 leading-relaxed max-w-2xl">Neque volutpat ac tincidunt vitae semper quis lectus nulla at. At elementum eu facilisis sed odio morbi quis commodo. Adipiscing bibendum est ultricies integer quis auctor elit. Pellentesque sit amet porttitor eget dolor morbi non.</p>
            <div class="mb-8">
                <a href="#" type="button" class=" btn  btn-dark  btn-outline  btn-size-lg">
                    BTN

                </a>
            </div>
        </div>
    </div>
</article>
 
<article class="mx-auto w-full md:w-1/2">
    <div class="">
        <img
                src="{{ section.image }}"
                alt="{{ section.title }}"
                class="object-cover object-center aspect-video w-full h-full"
                loading="lazy"
        />
    </div>

    {# Cards container with negative margin #}
    <div class="relative mx-6 lg:mx-8 -mt-20">
        <div class="flex flex-col justify-start items-start gap-4 px-6 py-8 bg-white shadow-16 hover:shadow-32 hover:shadow-black/08 transition-all duration-300">
            <h2 class="h3 mb-4">{{ section.title }}</h2>
            <p class="text-body-base mb-8 leading-relaxed max-w-2xl">{{ section.description }}</p>
            <div class="mb-8">
                {% render "@template-button" with {
                    href: "#",
                    label: section.cta_text,
                    color: section.cta_color,
                    type: section.cta_type,
                } %}
            </div>
        </div>
    </div>
</article>
 
{
  "section": {
    "image": "/img/card_text/img_2.png",
    "title": "Title",
    "description": "Neque volutpat ac tincidunt vitae semper quis lectus nulla at. At elementum eu facilisis sed odio morbi quis commodo. Adipiscing bibendum est ultricies integer quis auctor elit. Pellentesque sit amet porttitor eget dolor morbi non.",
    "cta_color": "dark",
    "cta_type": "outline",
    "cta_text": "BTN"
  }
}

No notes defined.