Regione Toscana Design System

Shadows 

<div class="rtds-flex rtds-gap-8 rtds-p-6">

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow none</strong></h2>
        <p>rtds-shadow-none</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-none">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow sm</strong></h2>
        <p>rtds-shadow-sm</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-sm">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow</strong></h2>
        <p>rtds-shadow</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow md</strong></h2>
        <p>rtds-shadow-md</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-md">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow lg</strong></h2>
        <p>rtds-shadow-lg</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-lg">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow xl</strong></h2>
        <p>rtds-shadow-xl</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-xl">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow 2xl</strong></h2>
        <p>rtds-shadow-2xl</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-2xl">
        </div>
    </div>

    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>Shadow inner</strong></h2>
        <p>rtds-shadow-inner</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 rtds-shadow-inner">
        </div>
    </div>

</div>
 
<div class="rtds-flex rtds-gap-8 rtds-p-6">
{% for shadow in shadows %}
    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>{{ shadow.name }}</strong></h2>
        <p>{{ shadow.class }}</p>
        <div class="rtds-w-20 rtds-h-20 rtds-bg-neutral-50 {{ shadow.class }}">
        </div>
    </div>
{% endfor %}
</div>
 
{
  "shadows": [
    {
      "name": "Shadow none",
      "class": "rtds-shadow-none"
    },
    {
      "name": "Shadow sm",
      "class": "rtds-shadow-sm"
    },
    {
      "name": "Shadow",
      "class": "rtds-shadow"
    },
    {
      "name": "Shadow md",
      "class": "rtds-shadow-md"
    },
    {
      "name": "Shadow lg",
      "class": "rtds-shadow-lg"
    },
    {
      "name": "Shadow xl",
      "class": "rtds-shadow-xl"
    },
    {
      "name": "Shadow 2xl",
      "class": "rtds-shadow-2xl"
    },
    {
      "name": "Shadow inner",
      "class": "rtds-shadow-inner"
    }
  ]
}