Etat Pur Design System

Product Range Card 

<div class="flex max-md:flex-col">
    <div class="max-md:container max-md:mx-auto flex ">
        <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>
    </div>
</div>
 
<div class="flex max-md:flex-col">
    {% if range.path %}
        <div class="w-full h-[400px] md:hidden" aria-hidden="true">
            <img src="{{ range.path }}"
                 alt="Ranges"
                 class="object-cover object-center w-full h-full"
                 loading="lazy"
            >
        </div>
    {% endif %}
    <div class="max-md:container max-md:mx-auto flex {% if range.path %}max-md:-mt-20{% endif %}">
        <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>
    </div>
</div>
 
{
  "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.