Alain Afflelou Design System

Status 

<div class="text-2xl">Status</div>
<div class="flex gap-6 justify-center">
    <div class="flex flex-col items-center">
        <div class="rounded-lg w-32 h-32 ring ring-status-focus"></div>
        <div class="font-semibold pt-4">Focus</div>
    </div>
    <div class="flex flex-col items-center">
        <div class="rounded-lg w-32 h-32 ring ring-status-success"></div>
        <div class="font-semibold pt-4">Success</div>
    </div>
    <div class="flex flex-col items-center">
        <div class="rounded-lg w-32 h-32 ring ring-status-warning"></div>
        <div class="font-semibold pt-4">Warning</div>
    </div>
    <div class="flex flex-col items-center">
        <div class="rounded-lg w-32 h-32 ring ring-status-error"></div>
        <div class="font-semibold pt-4">Error</div>
    </div>
</div>
 
<div class="text-2xl">Status</div>
<div class="flex gap-6 justify-center">
{% for status in statuses %}
    <div class="flex flex-col items-center">
        <div class="rounded-lg w-32 h-32 {{ status.class }}"></div>
        <div class="font-semibold pt-4">{{ status.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.