Etat Pur Design System

Shadows 

<div class="text-2xl mt-10">Shadows</div>
<div class="flex gap-6 mt-6">
    <div class="flex flex-col items-center">
        <div class="">0</div>
        <div class="w-32 h-16 bg-transparent shadow-0"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">2</div>
        <div class="w-32 h-16 bg-transparent shadow-2"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">4</div>
        <div class="w-32 h-16 bg-transparent shadow-4"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">8</div>
        <div class="w-32 h-16 bg-transparent shadow-8"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">16</div>
        <div class="w-32 h-16 bg-transparent shadow-16"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">32</div>
        <div class="w-32 h-16 bg-transparent shadow-32"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">64</div>
        <div class="w-32 h-16 bg-transparent shadow-64"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">64tb</div>
        <div class="w-32 h-16 bg-transparent shadow-64tb"></div>
    </div>
</div>
 
<div class="text-2xl mt-10">Shadows</div>
<div class="flex gap-6 mt-6">
    {% for shadow in shadows %}
        <div class="flex flex-col items-center">
            <div class="">{{ shadow.label }}</div>
            <div class="w-32 h-16 bg-transparent {{ shadow.class }}"></div>
        </div>
    {% endfor %}
</div>
 
{
  "shadows": [
    {
      "label": "0",
      "class": "shadow-0"
    },
    {
      "label": "2",
      "class": "shadow-2"
    },
    {
      "label": "4",
      "class": "shadow-4"
    },
    {
      "label": "8",
      "class": "shadow-8"
    },
    {
      "label": "16",
      "class": "shadow-16"
    },
    {
      "label": "32",
      "class": "shadow-32"
    },
    {
      "label": "64",
      "class": "shadow-64"
    },
    {
      "label": "64tb",
      "class": "shadow-64tb"
    }
  ]
}

No notes defined.