Regione Toscana Design System Design System Servizi

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"
    }
  ]
}

Ombre (Box Shadows)

Classi per aggiungere ombra agli elementi. Usano il prefisso rtds-.

Classi disponibili

Classe Intensità Utilizzo tipico
rtds-shadow-none Nessuna Rimuove ombra esistente
rtds-shadow-sm Leggera Card, chip, elementi con leggero rilievo
rtds-shadow Standard Ombra default — card, pulsanti
rtds-shadow-md Media Dropdown, tooltip, elementi in evidenza
rtds-shadow-lg Ampia Modal, panel, overlay
rtds-shadow-xl Grande Dialog, popovers in primo piano
rtds-shadow-2xl Molto grande Header fisso, elementi flottanti importanti
rtds-shadow-inner Interna Input attivi, effetto incasso

Esempi

<!-- Card con ombra leggera -->
<div class="rtds-shadow-sm rtds-rounded-lg rtds-p-4">
  Contenuto card
</div>

<!-- Dropdown -->
<div class="rtds-shadow-md rtds-rounded rtds-bg-white">
  Menu dropdown
</div>

<!-- Modal -->
<div class="rtds-shadow-xl rtds-rounded-lg rtds-p-6">
  Contenuto modal
</div>

<!-- Input con ombra interna -->
<input class="rtds-shadow-inner rtds-border rtds-border-gray-02 rtds-rounded">

Note

  • Le ombre usano i colori definiti in Tailwind (--tw-shadow-color)
  • Per personalizzare il colore dell’ombra usare rtds-shadow-{color} con la variante shadow-color
  • Combinare sempre con rtds-rounded-* per coerenza visiva