Etat Pur Design System

Hero 

<section class="relative h-px w-full min-h-[360px] md:min-h-[368px] 2xl:min-h-[408px] 3xl:min-h-[544px]">
    <div class="container grid-layout md:items-center h-full w-full ">
        <picture class="absolute inset-0">
            <source srcset="../../img/hero/mobile.png" media="(max-width: 376px)">
            <img class="object-cover w-full h-full" src="../../img/hero/desktop.png" alt="">
        </picture>
        <div class="flex flex-col col-span-3 sm:col-span-6 2xl:col-span-5 relative gap-4 adjusted-marg-y-sm">
            <h1 class="h3">Soins purs</h1>
            <p class="h6-base">Des soins biomimétiques pour chaque type de peau, sans ingrédients superflus ni nocifs.</p>
        </div>
    </div>
</section>
 
<section class="relative h-px w-full min-h-[360px] md:min-h-[368px] 2xl:min-h-[408px] 3xl:min-h-[544px]">
    <div class="container grid-layout md:items-center h-full w-full ">
        <picture class="absolute inset-0">
            <source srcset="{{ img.mobile_src | path }}" media="(max-width: 376px)">
            <img class="object-cover w-full h-full" src="{{ img.desktop_src | path }}" alt="{{ img.alt }}">
        </picture>
        <div class="flex flex-col col-span-3 sm:col-span-6 2xl:col-span-5 relative gap-4 adjusted-marg-y-sm">
            <h1 class="h3">{{ title }}</h1>
            <p class="h6-base">{{ content }}</p>
        </div>
    </div>
</section>
 
{
  "title": "Soins purs",
  "content": "Des soins biomimétiques pour chaque type de peau, sans ingrédients superflus ni nocifs.",
  "img": {
    "desktop_src": "/img/hero/desktop.png",
    "mobile_src": "/img/hero/mobile.png"
  }
}

No notes defined.