Regione Toscana Design System Design System Servizi

Custom Gradients 

<div class="rtds-p-6">
    <div class="rtds-pb-4">
        <h1 class="rtds-text-2xl rtds-font-bold">Custom gradients</h1>
    </div>

    <div class="rtds-grid rtds-grid-cols-2 rtds-gap-10">

        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>gradient-01</strong></h2>
            <p class="rtds-text-base">Class: rtds-bg-gradient-01</p>

            <div class="rtds-flex rtds-gap-4">

                <div class="rtds-pb-6 rtds-h-14 rtds-bg-gradient-01 rtds-flex-1">

                </div>

            </div>
        </div>

        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>gradient-02</strong></h2>
            <p class="rtds-text-base">Class: rtds-bg-gradient-02</p>

            <div class="rtds-flex rtds-gap-4">

                <div class="rtds-pb-6 rtds-h-14 rtds-bg-gradient-02 rtds-flex-1">

                </div>

            </div>
        </div>

        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>gradient-03</strong></h2>
            <p class="rtds-text-base">Class: rtds-bg-gradient-03</p>

            <div class="rtds-flex rtds-gap-4">

                <div class="rtds-pb-6 rtds-h-14 rtds-bg-gradient-03 rtds-flex-1">

                </div>

            </div>
        </div>

        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>gradient-04</strong></h2>
            <p class="rtds-text-base">Class: rtds-bg-gradient-04</p>

            <div class="rtds-flex rtds-gap-4">

                <div class="rtds-pb-6 rtds-h-14 rtds-bg-gradient-04 rtds-flex-1">

                </div>

            </div>
        </div>

        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>gradient-05</strong></h2>
            <p class="rtds-text-base">Class: rtds-bg-gradient-05</p>

            <div class="rtds-flex rtds-gap-4">

                <div class="rtds-pb-6 rtds-h-14 rtds-bg-gradient-05 rtds-flex-1">

                </div>

            </div>
        </div>

    </div>

</div>
</div>
 
<div class="rtds-p-6">
  <div class="rtds-pb-4">
    <h1 class="rtds-text-2xl rtds-font-bold">Custom gradients</h1>
  </div>

  <div class="rtds-grid rtds-grid-cols-2 rtds-gap-10">

      {% for gradient in gradients %}
        <div class="rtds-grid rtds-gap-4">
            <h2 class="rtds-text-lg rtds-mb-6"><strong>{{ gradient.name }}</strong></h2>
            <p class="rtds-text-base">Class: {{ gradient.class }}</p>
            
            <div class="rtds-flex rtds-gap-4">
    
            <div
                class="rtds-pb-6 rtds-h-14 {{ gradient.class }} rtds-flex-1"
            >
            
            </div>

            </div>
        </div>
      {% endfor %}
    </div>

  </div>
</div>
 
{
  "gradients": [
    {
      "name": "gradient-01",
      "class": "rtds-bg-gradient-01"
    },
    {
      "name": "gradient-02",
      "class": "rtds-bg-gradient-02"
    },
    {
      "name": "gradient-03",
      "class": "rtds-bg-gradient-03"
    },
    {
      "name": "gradient-04",
      "class": "rtds-bg-gradient-04"
    },
    {
      "name": "gradient-05",
      "class": "rtds-bg-gradient-05"
    }
  ]
}
  • Handle: @custom-gradients
  • Preview:
  • Filesystem Path: components/01-design-system/tokens/custom-gradients/custom-gradients.njk

Gradienti personalizzati

Set di gradienti predefiniti del Design System RTDS. Le classi usano il prefisso rtds- e si applicano come sfondo a contenitori e sezioni.

I valori dei gradienti sono definiti come CSS Custom Properties in public/css/custom-properties.css.

Classi disponibili

Classe Descrizione Variabile CSS
rtds-bg-gradient-01 Sfumatura verde tenue (neutro → verde chiaro) --gradient-01
rtds-bg-gradient-02 Sfumatura blu tenue (bianco → azzurro chiaro) --gradient-02
rtds-bg-gradient-03 Sfumatura arancione tenue (bianco → pesca chiaro) --gradient-03
rtds-bg-gradient-04 Sfumatura grigio-blu (bianco → grigio-blu tenue) --gradient-04
rtds-bg-gradient-05 Gradiente scuro semitrasparente (overlay su immagini) --gradient-05

Valori CSS Custom Properties

--gradient-01: linear-gradient(6deg, #FBFBFB 2.33%, #E7F3E4 92.69%);
--gradient-02: linear-gradient(26deg, #F2FAFF -0.02%, #D2E9FF 74.53%);
--gradient-03: linear-gradient(26deg, #FFFAF2 -0.02%, #FFEDD2 74.53%);
--gradient-04: linear-gradient(133deg, #FFF 1.61%, #EEF3FA 98.28%);
--gradient-05: linear-gradient(271deg, rgba(255,153,0,0) -0.54%, rgba(134,91,7,0.60) 48.53%, rgba(24,15,5,0.60) 81.24%);

Utilizzo tipico

Gradiente Contesto
gradient-01 Sezioni tematiche ambiente/salute (verde)
gradient-02 Sezioni informative, servizi (blu)
gradient-03 Sezioni calde, eventi, campagne (arancione)
gradient-04 Sfondo pagina, header neutro
gradient-05 Overlay su immagini di sfondo (scurisce per leggibilità testo)

Esempi

<!-- Sezione con gradiente tenue -->
<section class="rtds-bg-gradient-01 rtds-py-8">
  Contenuto sezione
</section>

<!-- Overlay gradiente su immagine -->
<div class="rtds-relative">
  <img src="..." alt="">
  <div class="rtds-absolute rtds-inset-0 rtds-bg-gradient-05"></div>
  <h1 class="rtds-relative rtds-text-white">Titolo su immagine</h1>
</div>

Personalizzazione

I CMS ospitanti possono sovrascrivere i gradienti ridefinendo le variabili CSS:

:root {
  --gradient-01: linear-gradient(to bottom, #fff, #e8f5e9);
}