Etat Pur Design System

Product Range Card: Theme Blue 

<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 Actifs Purs
        </h3>
        <span class="w-10 h-2 bg-brand-500" aria-hidden="true"></span>
    </div>

    <p class="text-body-base">
        Des actifs à la juste dose pour cibler efficacement chaque problématique, si la peau en a besoin : imperfections, signes de l'âge, rougeurs...
    </p>

    <a href="#" type="button" class="self-start  btn  btn-dark  btn-outline  btn-size-lg">
        Découvrir les actifs

    </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 Actifs Purs",
    "description": "Des actifs à la juste dose pour cibler efficacement chaque problématique, si la peau en a besoin : imperfections, signes de l'âge, rougeurs...",
    "cta": "Découvrir les actifs",
    "cta_type": "outline",
    "theme": "blue"
  }
}

No notes defined.