<section class="flex flex-col gap-3 adjusted-marg-b-md">
<div class="flex flex-row justify-between items-center">
<h2 class="h4">À la une</h2>
<a href="#" class="
underline
link-base
link-dark
">
Plus articles
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-3 xl:gap-x-4 3xl:gap-x-5">
<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/img.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 ">
<img src="/img/blog/thumbnail-2.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">Vieillissement de la peau du visage : nos astuces à partir de 40 ans</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 ">
<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 ">
<img src="/img/blog/thumbnail-2.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 ">
<img src="/img/blog/img.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">Vieillissement de la peau du visage : nos astuces à partir de 40 ans</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 ">
<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>
</section>
<section class="flex flex-col gap-3 adjusted-marg-b-md">
{% if showHeader %}
<div class="flex flex-row justify-between items-center">
<h2 class="h4">À la une</h2>
{% render "@template-link" with {
underlined: true,
label: "Plus articles",
href: "#",
type: "dark",
size: "base"
} %}
</div>
{% endif %}
<div class="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-3 xl:gap-x-4 3xl:gap-x-5">
{% for article in articles %}
{% render "@blog-card-item" with {
title: article.title,
src: article.img.src
} %}
{% endfor %}
</div>
{% if showHeader == false %}
{% render "@pagination-simple--small" with {
class: "justify-center"
} %}
{% endif %}
</section>
{
"showHeader": true,
"articles": [
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/img.png"
}
},
{
"title": "Vieillissement de la peau du visage : nos astuces à partir de 40 ans",
"img": {
"src": "/img/blog/thumbnail-2.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-2.png"
}
},
{
"title": "Vieillissement de la peau du visage : nos astuces à partir de 40 ans",
"img": {
"src": "/img/blog/img.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
}
]
}
No notes defined.