Custom Gradients

Ready

HTML
View
Context
Info
Notes


        
        <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:
- With layout
- Component only
Filesystem Path: components/01-design-system/tokens/custom-gradients/custom-gradients.njk

Custom gradients

Custom gradients for Design System. Set of custom classes with rtds- prefix used for background gradient; each class has a Tailwind color class assigned as in Figma Design System.