<section class="flex flex-col gap-2.5 pt-6 lg:pt-8 3xl:pt-10">
<div class="flex flex-row items-center gap-1 text-body-xs">
<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="M9.56802 3H5.25C4.00736 3 3 4.00736 3 5.25V9.56802C3 10.1648 3.23705 10.7371 3.65901 11.159L13.2401 20.7401C13.9388 21.4388 15.0199 21.6117 15.8465 21.0705C17.9271 19.7084 19.7084 17.9271 21.0705 15.8465C21.6117 15.0199 21.4388 13.9388 20.7401 13.2401L11.159 3.65901C10.7371 3.23705 10.1648 3 9.56802 3Z" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M6 6H6.0075V6.0075H6V6Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Skin-concern:
<a href="#" class="badge badge-corpo !font-normal">Loss of radiance & hyperpigmentation</a>
</div>
<div class="flex flex-wrap gap-2 justify-center md:justify-between content-center bg-neutral-50 adjusted-marg-y-xs px-4">
<div class="flex flex-row items-center gap-4 text-body-sm font-bold">
Partager:
<div class="flex flex-row gap-2">
<a href="#" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau facebook (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau facebook" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />
</svg>
</a>
<a href="#" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau linkedin (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau linkedin" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6284 13.6664H11.259V9.95377C11.259 9.06844 11.241 7.92911 10.0244 7.92911C8.78902 7.92911 8.60035 8.89244 8.60035 9.88844V13.6664H6.23102V6.03177H8.50702V7.07244H8.53769C8.85569 6.47244 9.62902 5.83911 10.7844 5.83911C13.185 5.83911 13.629 7.41911 13.629 9.47577L13.6284 13.6664ZM3.55502 4.98711C2.79235 4.98711 2.17969 4.36977 2.17969 3.61044C2.17969 2.85177 2.79302 2.23511 3.55502 2.23511C4.31502 2.23511 4.93102 2.85177 4.93102 3.61044C4.93102 4.36977 4.31435 4.98711 3.55502 4.98711ZM4.74302 13.6664H2.36702V6.03177H4.74302V13.6664Z" fill="currentColor" />
</svg>
</a>
<a href="#" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau link (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau link" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M8.79351 5.82402C9.09285 5.96701 9.37338 6.16248 9.62132 6.41042C10.7929 7.58199 10.7929 9.48149 9.62132 10.6531L6.62132 13.6531C5.44975 14.8246 3.55025 14.8246 2.37868 13.6531C1.20711 12.4815 1.20711 10.582 2.37868 9.41042L3.54999 8.2391M12.45 7.82437L13.6213 6.65306C14.7929 5.48149 14.7929 3.58199 13.6213 2.41042C12.4497 1.23885 10.5503 1.23885 9.37868 2.41042L6.37868 5.41042C5.20711 6.58199 5.20711 8.48149 6.37868 9.65306C6.62662 9.901 6.90715 10.0965 7.20649 10.2395" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
<a href="#" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau mail (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau mail" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
</div>
</div>
<div class="flex flex-wrap items-center justify-center md:justify-end gap-1 text-body-sm font-bold">
Cet article vous a-t-il été utile ?
<div class="flex flex-row gap-2">
<button class="flex items-center gap-1 py-1 px-2 hover:bg-white" data-state="clic-number">
<svg class="text-green-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.42171 6.83331C4.95928 6.83331 5.44432 6.53609 5.77607 6.11309C6.29151 5.45587 6.94113 4.90891 7.68369 4.51346C8.16511 4.25707 8.58286 3.87617 8.78543 3.36974C8.92717 3.01538 9 2.63722 9 2.25557V1.83331C9 1.55717 9.22386 1.33331 9.5 1.33331C10.3284 1.33331 11 2.00489 11 2.83331C11 3.60107 10.827 4.3284 10.5178 4.97845C10.3407 5.35067 10.5891 5.83331 11.0013 5.83331M11.0013 5.83331H13.0852C13.7696 5.83331 14.3822 6.29598 14.4547 6.97655C14.4846 7.25804 14.5 7.54388 14.5 7.83331C14.5 9.73173 13.8387 11.4757 12.734 12.8475C12.4756 13.1683 12.0761 13.3333 11.6642 13.3333H8.98683C8.66439 13.3333 8.34405 13.2813 8.03815 13.1794L5.96185 12.4873C5.65595 12.3853 5.33561 12.3333 5.01317 12.3333H3.93614M11.0013 5.83331H9.5M3.93614 12.3333C3.99135 12.4697 4.05142 12.6036 4.11615 12.7348C4.24758 13.0011 4.06413 13.3333 3.76712 13.3333H3.16192C2.56945 13.3333 2.01994 12.988 1.84704 12.4213C1.62139 11.6817 1.5 10.8967 1.5 10.0833C1.5 9.04834 1.69654 8.05927 2.05433 7.15139C2.2577 6.63534 2.77822 6.33331 3.3329 6.33331H4.03474C4.34936 6.33331 4.53154 6.70392 4.3682 6.97281C3.81726 7.87984 3.5 8.94453 3.5 10.0833C3.5 10.879 3.65488 11.6385 3.93614 12.3333Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm font-bold text-black">Oui</span>
<span class="text-body-xxs font-bold bg-black text-white rounded-full w-6 h-6 flex items-center justify-center">
88
</span>
</button>
<button class="flex items-center gap-1 py-1 px-2 hover:bg-white" data-state="default">
<svg class="text-red-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.42171 6.83331C4.95928 6.83331 5.44432 6.53609 5.77607 6.11309C6.29151 5.45587 6.94113 4.90891 7.68369 4.51346C8.16511 4.25707 8.58286 3.87617 8.78543 3.36974C8.92717 3.01538 9 2.63722 9 2.25557V1.83331C9 1.55717 9.22386 1.33331 9.5 1.33331C10.3284 1.33331 11 2.00489 11 2.83331C11 3.60107 10.827 4.3284 10.5178 4.97845C10.3407 5.35067 10.5891 5.83331 11.0013 5.83331M11.0013 5.83331H13.0852C13.7696 5.83331 14.3822 6.29598 14.4547 6.97655C14.4846 7.25804 14.5 7.54388 14.5 7.83331C14.5 9.73173 13.8387 11.4757 12.734 12.8475C12.4756 13.1683 12.0761 13.3333 11.6642 13.3333H8.98683C8.66439 13.3333 8.34405 13.2813 8.03815 13.1794L5.96185 12.4873C5.65595 12.3853 5.33561 12.3333 5.01317 12.3333H3.93614M11.0013 5.83331H9.5M3.93614 12.3333C3.99135 12.4697 4.05142 12.6036 4.11615 12.7348C4.24758 13.0011 4.06413 13.3333 3.76712 13.3333H3.16192C2.56945 13.3333 2.01994 12.988 1.84704 12.4213C1.62139 11.6817 1.5 10.8967 1.5 10.0833C1.5 9.04834 1.69654 8.05927 2.05433 7.15139C2.2577 6.63534 2.77822 6.33331 3.3329 6.33331H4.03474C4.34936 6.33331 4.53154 6.70392 4.3682 6.97281C3.81726 7.87984 3.5 8.94453 3.5 10.0833C3.5 10.879 3.65488 11.6385 3.93614 12.3333Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm font-bold text-black">Non</span>
</button>
</div>
</div>
</div>
</section>
<section class="flex flex-col gap-2.5 pt-6 lg:pt-8 3xl:pt-10">
<div class="flex flex-row items-center gap-1 text-body-xs">
{% render "@icons-heroicons--tag-outline" with {size: 16 } %}
Skin-concern:
<a href="#" class="badge badge-corpo !font-normal">Loss of radiance & hyperpigmentation</a>
</div>
<div class="flex flex-wrap gap-2 justify-center md:justify-between content-center bg-neutral-50 adjusted-marg-y-xs px-4">
<div class="flex flex-row items-center gap-4 text-body-sm font-bold">
Partager:
<div class="flex flex-row gap-2">
{% for social in socials %}
{% render "@template-button" with {
href: social.href, external:true, color: "dark", type: 'subtle', icon_type:"only-icon", size:"sm", border:true,
label: "Ouvrir le réseau " ~ social.name,
icon: {
name: social.nameIcon,
}
} %}
{% endfor %}
</div>
</div>
<div class="flex flex-wrap items-center justify-center md:justify-end gap-1 text-body-sm font-bold">
Cet article vous a-t-il été utile ?
{% render "@blog-likedislake" with {
like_state: 'clic-number',
dislike_state: 'default',
like_count: 88
} %}
</div>
</div>
</section>
{
"socials": [
{
"name": "facebook",
"nameIcon": "social--facebook",
"href": "#"
},
{
"name": "linkedin",
"nameIcon": "social--linkedin",
"href": "#"
},
{
"name": "link",
"nameIcon": "heroicons--link-outline",
"href": "#"
},
{
"name": "mail",
"nameIcon": "heroicons--mail-outline",
"href": "#"
}
]
}
No notes defined.