feat: Add a breadcrumb

assets/css/scss/elements/_feature-box.scss

@@ -0,0 +1,102 @@
+//
+// Feature box //
+//
+.feature-box {
+	@include display-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	position: relative;
+	min-height: 50px;
+	padding-left: 74px;
+	@include breakpoint-less(md) {
+		padding-left: 66px;
+	}
+	.feature-box-icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 50px;
+		height: 50px;
+		border-radius: 50%;
+		text-align: center;
+		@include transition(ease-out 0.16s);
+		* {
+			margin: 0;
+			line-height: 50px;
+			vertical-align: middle;
+			@include transition(ease-out 0.16s);
+		}
+		a {
+			display: block;
+		}
+		//
+		// Positions //
+		//
+		&.middle {
+			top: 50%;
+			@include transform(translateY(-50%));
+		}
+	}
+	h1,h2,h3,h4,h5,h6 {
+		width: 100%;
+	}
+	//
+	// Sizes //
+	//
+	&.feature-box-xl {
+		min-height: 70px;
+		padding-left: 94px;
+		@include breakpoint-less(md) {
+			padding-left: 86px;
+		}
+		.feature-box-icon {
+			width: 70px;
+			height: 70px;
+			* {
+				line-height: 70px;
+			}
+		}
+	}
+	&.feature-box-lg {
+		min-height: 60px;
+		padding-left: 84px;
+		@include breakpoint-less(md) {
+			padding-left: 80px;
+		}
+		.feature-box-icon {
+			width: 60px;
+			height: 60px;
+			* {
+				line-height: 60px;
+			}
+		}
+	}
+	&.feature-box-sm {
+		min-height: 40px;
+		padding-left: 64px;
+		@include breakpoint-less(md) {
+			padding-left: 56px;
+		}
+		.feature-box-icon {
+			width: 40px;
+			height: 40px;
+			* {
+				line-height: 40px;
+			}
+		}
+	}
+	&.feature-box-xs {
+		min-height: 32px;
+		padding-left: 54px;
+		@include breakpoint-less(md) {
+			padding-left: 48px;
+		}
+		.feature-box-icon {
+			width: 32px;
+			height: 32px;
+			* {
+				line-height: 32px;
+			}
+		}
+	}
+}