cards component

.gitignore

@@ -8,3 +8,4 @@ tmp/
 .DS_Store
 /Gemfile.lock
 /dist/
+/_site/

pages/_includes/cards/small-stats-3.html

@@ -4,9 +4,9 @@
          {{ include.percentage }}%
 
          {% if include.percentage > 0 %}
-            {% include ui/icon.html icon="arrow-up-right" %}
+            {% include ui/icon.html icon="arrow-up-right" class="icon-thin" %}
          {% elsif include.percentage < 0 %}
-            {% include ui/icon.html icon="arrow-down-right" %}
+            {% include ui/icon.html icon="arrow-down-right" class="icon-thin" %}
          {% endif %}
       </div>
       <div class="h1 m-0">{{ include.number }}</div>

pages/_includes/layout/debug-footer.html

 <div class="debug">
 	<a href="#" data-debug="dark">Dark mode</a>
 	<a href="#" data-debug="rtl">RTL mode</a>
-	<a href="#" data-debug="code">Disable code</a>
+	<a href="#" data-debug="code">Show cards code</a>
 	<a href="#" data-debug="folded">Folded sidebar</a>
 	<a href="#" data-debug="fullscreen">Fullscreen</a>
 	<a href="#" data-debug="header-sticky">Sticky header</a>
@@ -36,8 +36,8 @@
 		border-radius: 50%;
 	}
 
-	body.disable-debug-code .card-debug {
-		display: none;
+	body.show-debug-code .card-debug {
+		display: block;
 	}
 
 	@media (max-width: 991.98px) {
@@ -46,7 +46,7 @@
 		}
 	}
 
-	body.disable-debug-code a[data-debug="code"]:after,
+	body.show-debug-code a[data-debug="code"]:after,
 	html[dir="rtl"] a[data-debug="rtl"]:after,
 	body.theme-dark a[data-debug="dark"]:after,
 	:fullscreen a[data-debug="fullscreen"]:after,
@@ -70,7 +70,7 @@
 		        return false;
 	        })
 	        .on('click', '[data-debug="code"]', function (e) {
-		        $body.toggleClass('disable-debug-code');
+		        $body.toggleClass('show-debug-code');
 
 		        e.preventDefault();
 		        return false;

pages/_includes/layout/debug-header.html

@@ -5,6 +5,7 @@
 		top: 0;
 		line-height: 1;
 		font-size: 11px;
+      display: none;
 	}
 
 	.card-debug a {

pages/_includes/parts/dropdown/days.html

+<div class="dropdown">
+   <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ include.value | default: 'Last 7 days' }}
+   </a>
+   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+      <a class="dropdown-item active" href="#">Last 7 days</a>
+      <a class="dropdown-item" href="#">Last 30 days</a>
+      <a class="dropdown-item" href="#">Last 3 months</a>
+   </div>
+</div>

pages/cards-stats.html

+---
+title: Cards stats
+layout: default
+---
+
+<div class="row">
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">Sales</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">75%</div>
+            <div class="d-flex mb-2">
+               <div>Conversion rate</div>
+               <div class="ml-auto text-green">
+                  24% {% include ui/icon.html icon="trending-up" class="ml-1 icon-thin" %}
+               </div>
+            </div>
+            {% include ui/progress.html percentage=75 color="blue" size="sm" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">Revenue</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">$452,300</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">New clients</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">6,782</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" color="purple" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">New clients</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">184,730</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">5</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">6</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">7</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">8</div>
+</div>

scss/_variables.scss

@@ -107,7 +107,7 @@ $avatar-sizes: (
 
 $font-size-base: .9375rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: (24 / 16) !default;
+$line-height-base: (24 / 15) !default;
 
 $border-radius: 3px !default;
 
@@ -115,7 +115,7 @@ $h1-font-size: 1.875rem !default;
 $h2-font-size: 1.625rem !default;
 $h3-font-size: 1.25rem !default;
 $h4-font-size: 1.125rem !default;
-$h5-font-size: 1rem !default;
+$h5-font-size: $font-size-base !default;
 $h6-font-size: .875rem !default;
 
 $ribbon-margin: .25rem !default;

scss/ui/_charts.scss

@@ -16,6 +16,7 @@
   position: relative;
   width: 4rem;
   height: 2.5rem;
+  line-height: 1;
 }
 
 .sparkline-square {

scss/ui/_icons.scss

@@ -18,7 +18,7 @@
 }
 
 .icon-thin {
-  stroke-width: 1;
+  stroke-width: 1.5px;
 }
 
 .icon-filled {

scss/ui/_progress.scss

@@ -6,3 +6,7 @@
 .progress-xs {
   height: .25rem;
 }
+
+.progress-sm {
+  height: .5rem;
+}

scss/ui/_typo.scss

@@ -18,6 +18,7 @@ h6,
 .h4,
 .h5,
 .h6 {
+
   a {
     color: inherit;
   }

scss/utils/_text.scss

@@ -3,14 +3,12 @@
 .text-inherit { color: inherit !important; }
 .text-default { color: $body-color !important; }
 
-.text-sm	{ font-size: .75rem !important; }
-.text-base	{ font-size: 1rem !important; }
-.text-lg	{ font-size: 1.125rem !important; }
-.text-xl	{ font-size: 1.25rem !important; }
-.text-2xl	{ font-size: 1.5rem !important; }
-.text-3xl	{ font-size: 1.875rem !important; }
-.text-4xl	{ font-size: 2.25rem !important; }
-.text-5xl	{ font-size: 3rem !important; }
+.text-h6	{ font-size: $h6-font-size !important; }
+.text-h5	{ font-size: $h5-font-size !important; }
+.text-h4	{ font-size: $h4-font-size !important; }
+.text-h3	{ font-size: $h3-font-size !important; }
+.text-h2	{ font-size: $h2-font-size !important; }
+.text-h1	{ font-size: $h1-font-size !important; }
 
 .text-muted-light { color: $text-muted-light !important; }