Etat Pur Design System

Blog Slider Item 

<div class="relative grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10 overflow-hidden max-md:bg-neutral-25">
    <img src="../../img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center col-span-4 sm:col-span-9 md:col-span-6 h-full" />
    <div class="col-span-4 sm:col-span-9 md:absolute md:right-0 md:w-5/12 flex flex-col gap-3 justify-center h-full">
        <div class="flex flex-col gap-1.5 bg-neutral-25 adjusted-marg-xs after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
            <h3 class="h6">Vitamine C 10% : l’actif visage antitâches</h3>
            <p class="text-body-sm">Atténuer les taches liées au vieillissement, c’est l’une des missions de la Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au visage son éclat naturel.</p>
            <div class="flex flex-row items-center gap-4">
                <a href="#" class="
        
         link-sm
         link-dark
         link-icon
        
    ">
                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>
                    <span class="">Ingredient Spotlight</span>

                </a>
                <span>|</span>
                <div class="flex flex-row gap-1 text-body-xs">
                    <svg class=" shrink-0" width="16" height="16" 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> 3 min.</span>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="relative grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10 overflow-hidden max-md:bg-neutral-25">
    <img src="{{ "/img/blog/img.png" | path }}"
         alt="Blog"
         class="aspect-video object-cover object-center col-span-4 sm:col-span-9 md:col-span-6 h-full"
    />
    <div class="col-span-4 sm:col-span-9 md:absolute md:right-0 md:w-5/12 flex flex-col gap-3 justify-center h-full">
        <div class="flex flex-col gap-1.5 bg-neutral-25 adjusted-marg-xs after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
            <h3 class="h6">Vitamine C 10% : l’actif visage antitâches</h3>
            <p class="text-body-sm">Atténuer les taches liées au vieillissement, c’est l’une des missions de la Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au visage son éclat naturel.</p>
            <div class="flex flex-row items-center gap-4">
                {% render "@template-link" with {
                    label: "Ingredient Spotlight",
                    type: "dark",
                    size: "sm",
                    icon_type: "leading-icon",
                    icon: {
                        name: "heroicons--folder-outline",
                        size: 16
                    }
                } %}
                <span>|</span>
                <div class="flex flex-row gap-1 text-body-xs">
                    {% render "@icons-heroicons--clock-outline" with {size: 16} %}
                    <span> 3 min.</span>
                </div>
            </div>
        </div>
    </div>
</div>
 
/* No context defined. */

No notes defined.