Etat Pur Design System

Product Range Card 

<article class="flex flex-col justify-between gap-4 bg-white text-black shadow-16 shadow-black/08 hover:shadow-32 hover:shadow-black/08 p-6 transition-all duration-300">
    <div class="flex flex-col gap-2">
        <h3 class="h5">
            Les Soins Purs
        </h3>
        <span class="w-10 h-2 bg-brand-200" aria-hidden="true"></span>
    </div>

    <p class="text-body-base">
        Des soins en parfaite affinité avec la peau pour la nettoyer, l'hydrater et préserver ses défenses naturelles chaque jour, en toute sécurité.
    </p>

    <a href="#" type="button" class="self-start  btn  btn-dark  btn-outline  btn-size-lg">
        Prendre soin de ma peau

    </a>
</article>
 
<article class="flex flex-col justify-between gap-4 bg-white text-black shadow-16 shadow-black/08 hover:shadow-32 hover:shadow-black/08 p-6 transition-all duration-300">
    <div class="flex flex-col gap-2">
        <h3 class="h5">
            {{ range.title }}
        </h3>
        <span class="w-10 h-2 {% if range.theme == "blue" %}bg-brand-500{% else %}bg-brand-200{% endif %}" aria-hidden="true"></span>
    </div>

    <p class="text-body-base">
        {{ range.description }}
    </p>

    {% render "@template-button" with {
        color: "dark",
        href: "#",
        label: range.cta,
        type: range.cta_type,
        button_class: "self-start"
    } %}
</article>
 
{
  "range": {
    "title": "Les Soins Purs",
    "description": "Des soins en parfaite affinité avec la peau pour la nettoyer, l'hydrater et préserver ses défenses naturelles chaque jour, en toute sécurité.",
    "cta": "Prendre soin de ma peau",
    "cta_type": "outline",
    "theme": "moisturizer"
  }
}

No notes defined.