Alain Afflelou Design System

Blur 

<div class="flex justify-center h-[424px] gap-16" style="background: url('/img/bg-blur.jpeg')">
    <div class="flex flex-col justify-center gap-4">
        <div class="rounded-lg w-32 h-32 backdrop-blur-xl"></div>
        <div class="text-black font-semibold bg-white/80 px-2">Background blur xl / 24px</div>
    </div>
    <div class="flex flex-col justify-center gap-4">
        <div class="rounded-lg w-32 h-32 backdrop-blur-2xl"></div>
        <div class="text-black font-semibold bg-white/80 px-2">Background blur 2xl / 40px</div>
    </div>
</div>
 
<div class="flex justify-center h-[424px] gap-16" style="background: url('/img/bg-blur.jpeg')">
    {% for blur in blurs %}
    <div class="flex flex-col justify-center gap-4">
        <div class="rounded-lg w-32 h-32 {{ blur.class }}"></div>
        <div class="text-black font-semibold bg-white/80 px-2">{{ blur.label }}</div>
    </div>
    {% endfor %}
</div>
 
{
  "dropShadows": [
    {
      "label": "Small",
      "class": "shadow-sm"
    },
    {
      "label": "Base",
      "class": "shadow-base"
    },
    {
      "label": "Medium",
      "class": "shadow-md"
    },
    {
      "label": "Large",
      "class": "shadow-lg"
    },
    {
      "label": "Extra Large",
      "class": "shadow-xl"
    },
    {
      "label": "Double Extra Large",
      "class": "shadow-2xl"
    }
  ],
  "innerShadows": [
    {
      "label": "Small",
      "class": "shadow-inner-sm"
    },
    {
      "label": "Medium",
      "class": "shadow-inner-md"
    },
    {
      "label": "Large",
      "class": "shadow-inner-lg"
    }
  ],
  "blurs": [
    {
      "label": "Background blur xl / 24px",
      "class": "backdrop-blur-xl"
    },
    {
      "label": "Background blur 2xl / 40px",
      "class": "backdrop-blur-2xl"
    }
  ],
  "statuses": [
    {
      "label": "Focus",
      "class": "ring ring-status-focus"
    },
    {
      "label": "Success",
      "class": "ring ring-status-success"
    },
    {
      "label": "Warning",
      "class": "ring ring-status-warning"
    },
    {
      "label": "Error",
      "class": "ring ring-status-error"
    }
  ]
}

No notes defined.