Etat Pur Design System

Text Card: Two cards Image 

<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 xl:gap-8">
    <div class="col-span-2 lg:col-start-2">

        <div class="
            group relative overflow-hidden h-full p-10 bg-cover aspect-auto
            text-white                    " style="background-image: url(/img/card_text/img.png)">

            <div class="
            absolute inset-0
                            bg-black/40 group-hover:bg-black/08
                    "></div>

            <div class="relative h-full flex flex-col justify-between items-start gap-4">
                <div class="flex flex-col items-start gap-4">

                    <h3 class="h3 uppercase">
                        UTILITÉ
                    </h3>

                    <p class="text-body-base">
                        Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.
                    </p>
                </div>

                <div class="mt-auto">
                    <a href="#" type="button" class=" btn  btn-light  btn-outline  btn-size-lg">
                        CTA Secondaire

                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-span-2 ">

        <div class="
            group relative overflow-hidden h-full p-10 bg-cover aspect-auto
            text-white                    " style="background-image: url(/img/card_text/img_1.png)">

            <div class="
            absolute inset-0
                            bg-black/40 group-hover:bg-black/08
                    "></div>

            <div class="relative h-full flex flex-col justify-between items-start gap-4">
                <div class="flex flex-col items-start gap-4">

                    <h3 class="h3 uppercase">
                        UTILITÉ
                    </h3>

                    <p class="text-body-base">
                        Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.
                    </p>
                </div>

                <div class="mt-auto">
                    <a href="#" type="button" class=" btn  btn-light  btn-outline  btn-size-lg">
                        CTA Secondaire

                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 xl:gap-8">
    {% for card in cards %}
        <div class="col-span-2 {% if cards|length == 2 %}{% if loop.first %}lg:col-start-2{% endif %}{% elseif loop.first %} md:col-span-4 lg:col-span-2{% endif %}">
            {% include "@card_text" with {
                card: card,
                    overlayHover: "group-hover:bg-black/08"
            } only %}
        </div>
    {% endfor %}
</div>
 
{
  "cards": [
    {
      "background": {
        "type": "image",
        "value": "/img/card_text/img.png",
        "theme": "light"
      },
      "icon": false,
      "title": "UTILITÉ",
      "content": "Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.",
      "cta": {
        "label": "CTA Secondaire",
        "href": "#",
        "color": "light",
        "type": "outline"
      }
    },
    {
      "background": {
        "type": "image",
        "value": "/img/card_text/img_1.png",
        "theme": "light"
      },
      "icon": false,
      "title": "UTILITÉ",
      "content": "Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.",
      "cta": {
        "label": "CTA Secondaire",
        "href": "#",
        "color": "light",
        "type": "outline"
      }
    }
  ]
}

No notes defined.