homepage charts

src/pages/_includes/cards/development-activity.html

@@ -3,9 +3,14 @@
 		<div class="card-title">Development activity</div>
 	</div>
 	<div class="position-relative">
-		<div class="position-absolute top-0 left-0 px-4 w-50">
-			<div class="mb-1">Today's Earning: $4,262.40</div>
-			<p class="text-muted text-h5">Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus...</p>
+		<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
+			<div class="row g-2">
+				<div class="col-auto">{% include ui/sparkline.html percentage=35 type="pie" %}</div>
+				<div class="col">
+					<div>Today's Earning: $4,262.40</div>
+					<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
+				</div>
+			</div>
 		</div>
 		{% include ui/chart.html chart-id="development-activity" height=12 %}
 	</div>

src/scss/_variables.scss

@@ -295,8 +295,9 @@ $card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 $card-cap-bg: $min-black !default;
 
-$card-cap-padding-x: 1.25rem !default;
+$card-cap-padding-x: 1rem !default;
 $card-cap-padding-y: .75rem !default;
+$card-spacer-x: 1rem !default;
 
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;

src/scss/ui/_icons.scss

@@ -12,6 +12,11 @@
   }
 }
 
+.icon-inline {
+  width: 1.25em;
+  height: 1.25em;
+}
+
 .icon-filled {
   fill: currentColor;
 }