Etat Pur Design System

Push Card 

<div class="@container group h-full col-span-2 md:col-span-6 lg:col-span-4">
    <div class="relative h-full">
        <picture class="absolute inset-0 w-full h-full">
            <source srcset="/img/diagnostic/desktop-1.png" media="(min-width: 769px)" />
            <img src="/img/diagnostic/mobile-1.png" alt="Analyser votre peau" class="object-cover w-full h-full object-right-top" loading="lazy" />
        </picture>

        <div class="absolute inset-0 group-hover:bg-black/08 mix-blend-overlay"></div>

        <section class="relative flex items-center min-h-[353px] md:min-h-[590px] 2xl:min-h-[660px] 3xl:min-h-[820px] adjusted-marg-y-sm">
            <article class="self-end relative flex gap-3 w-full flex-col adjusted-marg-l-sm border-l-8 border-naos">
                <div class="flex flex-col gap-1.5">
                    <h2 class="h2 [&>span]:font-normal text-black">
                        Excepteur sint occaecat cupidatat
                    </h2>

                    <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-black">
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
                    </p>

                    <a href="#" class="
        
         link-medium
         link-dark
         link-icon
        font-bold items-center
    ">
                        <svg class=" shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>
                        <span class="">30 min</span>

                    </a>
                </div>

                <div class="flex  items-center gap-4">
                    <a href="#" type="button" class="w-max  btn  btn-dark  btn-outline  btn-size-lg">
                        Secondaire

                    </a>
                </div>
            </article>
        </section>
    </div>
</div>
 
<div class="@container group h-full col-span-2 md:col-span-6 lg:col-span-4">
    <div class="relative h-full">
        <picture class="absolute inset-0 w-full h-full">
            <source srcset="/img/diagnostic/desktop-1.png" media="(min-width: 769px)" />
            <img src="/img/diagnostic/mobile-1.png" alt="Analyser votre peau" class="object-cover w-full h-full object-right-top" loading="lazy" />
        </picture>

        <div class="absolute inset-0 group-hover:bg-black/08 mix-blend-overlay"></div>

        <section class="relative flex items-center min-h-[353px] md:min-h-[590px] 2xl:min-h-[660px] 3xl:min-h-[820px] adjusted-marg-y-sm">
            <article class="self-end relative flex gap-3 w-full flex-col adjusted-marg-l-sm border-l-8 border-naos">
                <div class="flex flex-col gap-1.5">
                    <h2 class="h2 [&>span]:font-normal text-black">
                        Excepteur sint occaecat cupidatat
                    </h2>

                    <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-black">
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
                    </p>

                    {% render "@template-link" with {
                        label: "30 min",
                        href: "#",
                        type: "dark",
                        size: 'medium',
                        link_class: "font-bold items-center",
                        icon_type: "leading-icon",
                        icon: {
                            name: "heroicons--clock-outline",
                            size: 20
                        }
                    } %}
                </div>

                <div class="flex  items-center gap-4">
                    {% render "@template-button" with {
                        label: "Secondaire",
                        color: "dark",
                        type: "outline",
                        href: "#",
                        button_class: "w-max"
                    } %}
                </div>
            </article>
        </section>
    </div>
</div>
 
/* No context defined. */

No notes defined.