tabler/preview/pages/card-gradients.html

---
title: Card Gradients
page-header: Card Gradients
page-menu: base.cards.gradients
layout: default
permalink: card-gradients.html
page-libs: [apexcharts]
---

{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %}

<div class="row row-cards">
   <div class="col-md-6">
      <div class="row row-cards">
         <div class="col-12">
            {% include "cards/welcome.html" %}
         </div>
         <div class="col-12">
            <div class="row">
               <div class="col-6">
                  <div class="row row-cards">
                     <div class="col-12">
                        {% include "cards/delete-confirm.html" %}
                     </div>
                     <div class="col-12">
                        {% include "cards/success-message.html" %}
                     </div>
                  </div>
               </div>
               <div class="col-6">
                  <div class="row row-cards">
                     <div class="col-12">
                        {% include "cards/pricing-plan.html" %}
                     </div>
                     <div class="col-12">
                        {% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success"
                        progress=75 %}
                     </div>
                     <div class="col-12">
                        {% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow"
                        progress=38 %}
                     </div>
                     <div class="col-12">
                        {% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red"
                        progress=8 %}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-3">
      <div class="row row-cards">
         <div class="col-12">
            {% include "cards/happy-birthday.html" %}
         </div>
         <div class="col-12">
            {% include "cards/you-win.html" %}
         </div>
         
      </div>
   </div>
   <div class="col-3">
      <div class="row row-cards">
         <div class="col-12">
            {% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain"
            description="Cloudy morning" %}
         </div>
         <div class="col-12">
            {% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud"
            description="Snowy day" %}
         </div>
         <div class="col-12">
            {% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny
            day" %}
         </div>
         <div class="col-12">
            {% include "cards/profile-contact.html" person=people[6] %}
         </div>
         <div class="col-12">
            {% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19"
            color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %}
         </div>
         <div class="col-12">
            {% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99"
            description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end
            card-gradient-green" %}
         </div>
         <div class="col-12">
            {% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales
            last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end
            card-gradient-red" %}
         </div>
      </div>
   </div>
</div>