feat: Add card gradients page and gradient card components (#2554)

.changeset/card-gradient-components.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+---
+
+Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
+

.changeset/card-gradients-page.md

@@ -0,0 +1,6 @@
+---
+"@tabler/preview": minor
+---
+
+Added new `card-gradients.html` page showcasing various gradient card styles and components.
+

core/scss/_props.scss

@@ -32,6 +32,7 @@
 
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
+    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_variables.scss

@@ -106,7 +106,7 @@ $colors: (
   'gray-dark': $gray-800,
 ) !default;
 
-$min-contrast-ratio: 4.5 !default;
+$min-contrast-ratio: 2 !default;
 $color-contrast-dark: $black !default;
 $color-contrast-light: $white !default;
 
@@ -444,7 +444,7 @@ $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
 $headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
-$headings-color: inherit !default;
+$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default;
 
 $font-weights: (
   'light': $font-weight-light,
@@ -556,7 +556,6 @@ $zindex-levels: (
   3: 3,
 ) !default;
 
-$min-contrast-ratio: 1.5 !default;
 $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
 $text-secondary-dark-opacity: 0.8 !default;

core/scss/ui/_buttons.scss

@@ -207,6 +207,10 @@
   @include elements-list;
 }
 
+.btn-list-center {
+  justify-content: center;
+}
+
 //
 // Button floating
 //

core/scss/ui/_cards.scss

@@ -1,3 +1,21 @@
+@use 'sass:map';
+
+@property --tblr-card-gradient-direction {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 180deg;
+}
+
+@keyframes gradient-animation {
+  0% {
+    --#{$prefix}card-gradient-direction: 180deg;
+  }
+
+  100% {
+    --#{$prefix}card-gradient-direction: 540deg;
+  }
+}
+
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
@@ -22,6 +40,7 @@
 
 // Card borderless
 .card-borderless {
+
   &,
   .card-header,
   .card-footer {
@@ -122,7 +141,7 @@
     background: $active-bg;
   }
 
-  & + & {
+  &+& {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -137,8 +156,8 @@ Stacked card
   &:after {
     position: absolute;
     top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-  inset-inline-end: var(--#{$prefix}card-stacked-offset);
-  inset-inline-start: var(--#{$prefix}card-stacked-offset);
+    inset-inline-end: var(--#{$prefix}card-stacked-offset);
+    inset-inline-start: var(--#{$prefix}card-stacked-offset);
     height: var(--#{$prefix}card-stacked-offset);
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +174,9 @@ Stacked card
   &:before {
     position: absolute;
     top: 0;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
@@ -287,7 +306,7 @@ Stacked card
   margin: 0 0 1rem;
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
   line-height: 1.5rem;
 
   @at-root a#{&}:hover {
@@ -321,17 +340,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm > & {
+  .card-sm>& {
     padding: 1rem;
   }
 
-  .card-md > & {
+  .card-md>& {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg > & {
+  .card-lg>& {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
@@ -345,7 +364,7 @@ Stacked card
     padding: 0;
   }
 
-  & + & {
+  &+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -408,6 +427,7 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
+
     td,
     th {
       &:first-child {
@@ -436,11 +456,11 @@ Card table
   tfoot {
     &:last-child {
       tr:last-child {
-        > *:last-child {
+        >*:last-child {
           border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
-        > *:first-child {
+        >*:first-child {
           border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
@@ -476,7 +496,7 @@ Card table
     }
   }
 
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -521,7 +541,7 @@ Card avatar
 Card list group
  */
 .card-list-group {
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
@@ -580,7 +600,7 @@ Card list group
         }
       }
 
-      + .nav-item {
+      +.nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -620,7 +640,7 @@ Card list group
     border-end-start-radius: 0;
   }
 
-  .nav-tabs + .tab-content .card {
+  .nav-tabs+.tab-content .card {
     border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0;
   }
@@ -633,3 +653,83 @@ Card note
   --#{$prefix}card-bg: #fff7dd;
   --#{$prefix}card-border-color: #fff1c9;
 }
+
+
+/**
+Card gradient
+*/
+.card-gradient {
+  --#{$prefix}card-gradient-direction: 180deg;
+  --#{$prefix}card-gradient-opacity: 86%;
+  --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
+
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
+
+}
+
+@each $name, $color in map.merge($colors, $theme-colors) {
+  .card-gradient-#{$name} {
+    --#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
+  }
+}
+
+.card-gradient-rainbow {
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
+}
+
+.card-gradient-sun {
+  --#{$prefix}card-gradient: #fd1d1d, #fcb045;
+}
+
+.card-gradient-snow {
+  --#{$prefix}card-gradient: #333, #e9ecef;
+}
+
+.card-gradient-ocean {
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
+}
+
+.card-gradient-mellow {
+  --#{$prefix}card-gradient: #f8ff00, #3ad59f;
+}
+
+.card-gradient-disco {
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+}
+
+.card-gradient-psychedelic {
+  --#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
+}
+
+.card-gradient-love {
+  --#{$prefix}card-gradient: #f235e6, #bc0707;
+}
+
+.card-gradient-gold {
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+}
+
+.card-gradient-animated {
+  animation: gradient-animation 15s linear infinite;
+}
+
+.card-gradient-bottom {
+  --#{$prefix}card-gradient-direction: 0deg;
+}
+
+.card-gradient-end {
+  --#{$prefix}card-gradient-direction: 270deg;
+}
+
+.card-gradient-start {
+  --#{$prefix}card-gradient-direction: 90deg;
+}

core/scss/ui/_payments.scss

@@ -9,7 +9,7 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: var(--#{config.$prefix}border-radius);
 }
 
 @each $payment in config.$payment-providers {

core/scss/ui/_tables.scss

@@ -1,4 +1,6 @@
 .table {
+  font: inherit;
+
   thead {
     th {
       background: $table-th-bg;

preview/pages/card-gradients.html

@@ -0,0 +1,97 @@
+---
+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>

preview/pages/charts.html

@@ -13,17 +13,7 @@ permalink: charts.html
 	</div>
 
 	<div class="col-12">
-		<div class="card">
-			<div class="card-body">
-				<div class="d-flex">
-					<h3 class="card-title">Social referrals</h3>
-					<div class="ms-auto">
-						{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
-					</div>
-				</div>
-				{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
-			</div>
-		</div>
+		{% include "cards/charts/social-referrals.html" %}
 	</div>
 
 	<div class="col-12">

shared/data/menu.json

@@ -105,6 +105,11 @@
             "title": "Card actions",
             "badge": "New"
           },
+          "gradients": {
+            "url": "card-gradients.html",
+            "title": "Card gradients",
+            "badge": "New"
+          },
           "masonry": {
             "url": "cards-masonry.html",
             "title": "Cards Masonry"

shared/data/sri.json

@@ -1,21 +1,21 @@
 {
-  "css": "sha384-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax",
-  "css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg",
-  "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
-  "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
-  "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
-  "css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
+  "css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h",
+  "css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw",
+  "css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS",
+  "css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8",
+  "css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl",
+  "css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ",
   "css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
   "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
   "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
   "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
-  "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
-  "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
+  "css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7",
+  "css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f",
   "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
   "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
-  "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
-  "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
-  "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
+  "css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm",
+  "css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh",
+  "js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT",
   "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/includes/cards/body-placeholder.html

@@ -1,5 +1,5 @@
 {% assign width = include.width | default: 400 %}
 {% assign height = include.height | default: 200 %}
-<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
-	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
+<div class="card-body{% if include.class %} {{ include.class }}{% endif %}">
+	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
 </div>

shared/includes/cards/charts/active-users-2.html

@@ -0,0 +1,13 @@
+<div class="card">
+	<div class="card-body">
+		<div class="subheader">Active Users</div>
+		<div class="d-flex align-items-baseline mb-2">
+			<div class="h1 mb-0 me-2">25,782</div>
+			<div class="me-auto">
+				{% include "ui/trending.html" value=-1 %}
+			</div>
+		</div>
+		{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
+	</div>
+</div>
+

shared/includes/cards/charts/social-referrals.html

@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-body">
+		<div class="d-flex">
+			<h3 class="card-title">Social referrals</h3>
+			<div class="ms-auto">
+				{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
+			</div>
+		</div>
+		{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
+	</div>
+</div>
+

shared/includes/cards/charts/total-users.html

@@ -0,0 +1,14 @@
+<div class="card">
+	<div class="card-body">
+		<div class="subheader">Total Users</div>
+		<div class="d-flex align-items-baseline">
+			<div class="h1 mb-0 me-2">75,782</div>
+			<div class="me-auto">
+				{% include "ui/trending.html" value=2 %}
+			</div>
+		</div>
+		<div class="text-secondary mt-2">24,635 users increased from last month</div>
+	</div>
+	{% include "ui/chart.html" chart-id="visitors" height="6" %}
+</div>
+

shared/includes/cards/delete-confirm.html

@@ -0,0 +1,12 @@
+<div class="card card-gradient card-gradient-danger">
+	<div class="card-body p-5 text-center">
+		<h3 class="card-title">Are you sure to delete this card?</h3>
+		<p class="text-secondary">If you delete this card, you will not be able to recover it.</p>
+
+		<div class="btn-list btn-list-center mt-5">
+			{% include "ui/button.html" text="Yes, delete it" color="danger" %}
+			{% include "ui/button.html" text="Cancel" %}
+		</div>
+	</div>
+</div>
+

shared/includes/cards/happy-birthday.html

@@ -0,0 +1,12 @@
+<div class="card card-gradient card-gradient-rainbow">
+	<div class="card-body text-center p-5">
+		<div class="display-5 leading-none mb-2">🍾 🎉</div>
+		<h1>Happy Birthday, Andrew!</h1>
+		<p class="text-secondary">We truly hope your day is brimming with joy, laughter, and countless moments that bring a smile to your face!</p>
+		<p class="text-secondary">To celebrate your special day, here's a discount code just for you: <strong class="text-body">NWYR20</strong>. Enjoy <strong class="text-body">20% off</strong> your next purchase!</p>
+		<div class="mt-5">
+			{% include "ui/button.html" text="Grab my special deal" icon="gift" color="primary" %}
+		</div>
+	</div>
+</div>
+

shared/includes/cards/pricing-plan.html

@@ -0,0 +1,37 @@
+<div class="card card-gradient card-gradient-love">
+	<div class="ribbon bg-pink">
+		Featured
+	</div>
+	<div class="card-body">
+		<div class="h-subheader text-pink">
+			Professional
+		</div>
+		<div class="d-flex align-items-baseline mt-5">
+			<div class="display-5">$199</div>
+			<div class="fs-1 text-secondary">/ month</div>
+		</div>
+		<ul class="list-unstyled mt-6 space-y space-y-2">
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>Unlimited</strong> Target Audience</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>1</strong> User Account</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>100+</strong> Video Tuts</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="x" color="secondary" %}</div>
+				<div class="text-secondary">Public Displays</div>
+			</li>
+		</ul>
+		<p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
+		<div class="mt-6">
+			{% include "ui/button.html" text="Purchase Now" color="pink" block %}
+		</div>
+	</div>
+</div>
+

shared/includes/cards/profile-contact.html

@@ -0,0 +1,20 @@
+{% assign person = include.person | default: people[1] %}
+<div class="card card-gradient card-gradient-{{ include.color | default: 'yellow' }}">
+	<div class="card-body text-center py-6">
+		<div class="position-absolute top-0 end-0 p-1">
+			<div class="btn btn-action">{% include "ui/icon.html" icon="star" color="yellow" type="filled" %}</div>
+		</div>
+		<div>
+			{% include "ui/avatar.html" size="2xl" person=person shape="rounded-circle" %}
+		</div>
+		<div class="h1 mt-4 mb-1">{{ person.full_name }}</div>
+		<div class="text-secondary">{{ person.job_title }}</div>
+
+		<div class="btn-list justify-content-center mt-3">
+			<a href="#" class="btn btn-icon btn-pill" title="Message" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="message" %}</a>
+			<a href="#" class="btn btn-icon btn-pill" title="Phone" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="phone" %}</a>
+			<a href="#" class="btn btn-icon btn-pill" title="Email" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="mail" %}</a>
+		</div>
+	</div>
+</div>
+

shared/includes/cards/small-stats.html

@@ -1,6 +1,6 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
-<div class="card card-sm">
+<div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-body">
 		<div class="row align-items-center">
 			{% if include.icon %}

shared/includes/cards/stat-gradient.html

@@ -0,0 +1,23 @@
+{% assign card-color = include.color | default: 'primary' %}
+{% assign card-icon = include.icon | default: 'trending-up' %}
+{% assign card-title = include.title | default: 'Total' %}
+{% assign card-value = include.value | default: '0' %}
+{% assign card-progress = include.progress | default: 0 %}
+
+<div class="card card-gradient card-gradient-{{ card-color }} card-gradient-start">
+	<div class="card-body">
+		<div class="row g-3">
+			<div class="col">
+				<h4 class="subheader mb-1">{{ card-title }}</h4>
+				<div class="h3 m-0">{{ card-value }}</div>
+			</div>
+			<div class="col-auto">
+				{% include "ui/avatar.html" icon=card-icon color=card-color %}
+			</div>
+			<div class="col-12">
+				{% include "ui/progress.html" value=card-progress color=card-color size="sm" %}
+			</div>
+		</div>
+	</div>
+</div>
+

shared/includes/cards/storage-usage.html

@@ -0,0 +1,33 @@
+<div class="card">
+	<div class="card-body">
+		<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
+		<div class="progress progress-separated mb-3">
+			<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
+			<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
+			<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
+		</div>
+		<div class="row">
+			<div class="col-auto d-flex align-items-center pe-2">
+				<span class="legend me-2 bg-primary"></span>
+				<span>Regular</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center px-2">
+				<span class="legend me-2 bg-info"></span>
+				<span>System</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center px-2">
+				<span class="legend me-2 bg-success"></span>
+				<span>Shared</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center ps-2">
+				<span class="legend me-2"></span>
+				<span>Free</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
+			</div>
+		</div>
+	</div>
+</div>
+

shared/includes/cards/store-product.html

@@ -3,7 +3,7 @@
 <div class="card">
 	<div class="card-body">
 		<div class="mb-4 text-center">
-			<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
+			<img src="{{ page | relative }}/static/products/{{ product.image }}" alt="{{ product.name }}" class="img-fluid">
 		</div>
 		<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
 		<div class="mt-5 d-flex align-items-center">
@@ -11,7 +11,7 @@
 				<strong>{{ product.price }}</strong>
 			</div>
 			<div class="ms-auto">
-				<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
+				<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='shopping-cart' %} Buy</a>
 			</div>
 		</div>
 	</div>

shared/includes/cards/success-message.html

@@ -0,0 +1,14 @@
+<div class="card card-gradient card-gradient-success">
+	<div class="card-body p-5 text-center">
+		<div class="mb-3">
+			{% include "ui/icon.html" icon="circle-check" class="icon-lg" color="success" %}
+		</div>
+		<h3 class="card-title">Success!</h3>
+		<p class="text-secondary">Your changes have been saved successfully.</p>
+
+		<div class="btn-list btn-list-center mt-5">
+			{% include "ui/button.html" text="Continue" color="success" %}
+		</div>
+	</div>
+</div>
+

shared/includes/cards/weather.html

@@ -0,0 +1,24 @@
+{% assign icon = include.icon | default: 'cloud-rain' %}
+<div class="card card-gradient card-gradient-{{ include.color | default: 'blue' }} card-gradient-end">
+	<div class="card-body">
+		<div class="row">
+			<div class="col">
+				<div class="row">
+               <div class="col-auto">
+                  <h3 class="card-title mb-2">{{ include.city | default: 'Warsaw' }}</h3>
+               </div>
+               <div class="col">
+                  {% include "ui/icon.html" icon=icon %}
+               </div>
+            </div>
+            <div class="text-secondary">
+               {{ include.description | default: 'Cloudy morning' }}
+            </div>
+			</div>
+			<div class="col-auto">
+            <div class="display-5 lh-1 fw-lighter">{{ include.temperature | default: 20 }}&deg;</div>
+			</div>
+      </div>
+	</div>
+</div>
+

shared/includes/cards/welcome.html

@@ -1,9 +1,9 @@
-<div class="card">
+<div class="card card-gradient">
 	<div class="card-body">
 		<div class="row gy-3">
 			<div class="col-12 col-sm d-flex flex-column">
 				<h3 class="h2">Welcome back, Paweł</h3>
-				<p class="text-muted">You have 5 new messages and 2 new notifications.</p>
+				<p class="text-secondary">You have 5 new messages and 2 new notifications.</p>
 
 				<div class="row g-5 mt-auto">
 					<div class="col-auto">

shared/includes/cards/you-win.html

@@ -0,0 +1,11 @@
+<div class="card card-gradient card-gradient-gold">
+	<div class="card-body text-center p-5">
+		<div class="display-3 leading-none mb-2">🏆</div>
+		<h1>You are winner!</h1>
+		<p class="text-secondary">You've been selected as our lucky winner for completing <strong class="text-body">100 orders</strong> this month! Click below to claim your exclusive prize and enjoy the benefits!</p>
+		<div class="mt-5">
+			{% include "ui/button.html" text="Claim Your Prize" icon="gift" color="primary" %}
+		</div>
+	</div>
+</div>
+

shared/includes/layout/homepage.html

@@ -3,33 +3,10 @@
 		{% include "cards/welcome.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="subheader">Total Users</div>
-				<div class="d-flex align-items-baseline">
-					<div class="h1 mb-0 me-2">75,782</div>
-					<div class="me-auto">
-						{% include "ui/trending.html" value=2 %}
-					</div>
-				</div>
-				<div class="text-secondary mt-2">24,635 users increased from last month</div>
-			</div>
-			{% include "ui/chart.html" chart-id="visitors" height="6" %}
-		</div>
+		{% include "cards/charts/total-users.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="subheader">Active Users</div>
-				<div class="d-flex align-items-baseline mb-2">
-					<div class="h1 mb-0 me-2">25,782</div>
-					<div class="me-auto">
-						{% include "ui/trending.html" value=-1 %}
-					</div>
-				</div>
-				{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
-			</div>
-		</div>
+		{% include "cards/charts/active-users-2.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
 		{% include "cards/charts/sales.html" %}
@@ -97,38 +74,7 @@
 	<div class="col-lg-6">
 		<div class="row row-cards">
 			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
-						<div class="progress progress-separated mb-3">
-							<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
-							<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
-							<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
-						</div>
-						<div class="row">
-							<div class="col-auto d-flex align-items-center pe-2">
-								<span class="legend me-2 bg-primary"></span>
-								<span>Regular</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center px-2">
-								<span class="legend me-2 bg-info"></span>
-								<span>System</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center px-2">
-								<span class="legend me-2 bg-success"></span>
-								<span>Shared</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center ps-2">
-								<span class="legend me-2"></span>
-								<span>Free</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
-							</div>
-						</div>
-					</div>
-				</div>
+				{% include "cards/storage-usage.html" %}
 			</div>
 			<div class="col-12">
 				{% include "cards/activity.html" %}