Etat Pur Design System

Blog Card Item 

<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
    <img src="../../img/blog/thumbnail-1.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
    <div class="flex flex-col gap-1.5 pt-4 px-4">
        <h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
        <p class="text-body-sm line-clamp-3">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-wrap items-center gap-2.5">
            <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 class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 {{ class }}">
    <img src="{{ src | path }}"
         alt="Blog"
         class="aspect-video object-cover object-center w-full"
    />
    <div class="flex flex-col gap-1.5 pt-4 px-4">
        <h3 class="h6">{{ title }}</h3>
        <p class="text-body-sm line-clamp-3">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-wrap items-center gap-2.5">
            {% 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>
 
{
  "title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
  "src": "/img/blog/thumbnail-1.png"
}

No notes defined.