Etat Pur Design System

Icon Text 

<div class="flex flex-col gap-4 ">
    <div class="flex flex-col items-center gap-1 w-full">
        <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
            <img src="/img/icon-text/image-icon-france.png" alt="image alt" width="72" height="72" class="w-10 lg:w-[72px]">
        </div>
        <div class="text-center text-body-sm text-black">
            Made in France
        </div>
    </div>
</div>
 
<div class="flex flex-col gap-4 {{ blockClass }}">
    <div class="flex flex-col items-center gap-1 w-full">
        <div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
            <img src="{{ image }}"
                 alt="{{ alt }}"
                 width="72"
                 height="72"
                 class="w-10 lg:w-[72px]"
            >
        </div>
        <div class="text-center text-body-sm {{ color is defined and color == 'dark' ? 'text-white' : 'text-black' }}">
            {{ text }}
        </div>
    </div>
</div>
 
{
  "text": "Made in France",
  "image": "/img/icon-text/image-icon-france.png",
  "alt": "image alt"
}

No notes defined.