new page headers

src/pages/_data/people.json

@@ -6,7 +6,7 @@
     "full_name": "Paweł Kuna",
     "email": "paweluna@howstuffworks.com",
     "gender": "Male",
-    "company": "Yombu",
+    "company": "Tabler",
     "department": "Training",
     "job_title": "UI Designer",
     "slogan": "utilize distributed convergence",

src/pages/page-headers.html

@@ -0,0 +1,131 @@
+---
+title: Page headers
+page-header: Page headers
+---
+
+{% assign person = site.data.people[0] %}
+
+<div class="my-5">
+	<div class="page-header">
+		<div class="row align-items-center">
+			<div class="col-auto">
+				{% include ui/avatar.html person=person size="md" %}
+			</div>
+			<div class="col">
+				<h2 class="page-title">{{ person.full_name }}</h2>
+				<div class="page-subtitle">
+					<div class="row">
+						<div class="col-auto">
+							{% include ui/icon.html icon="building-skyscraper" %}
+							<a href="#" class="text-reset">{{ person.job_title }} at {{ person.company }}</a>
+						</div>
+						<div class="col-auto">
+							{% include ui/icon.html icon="users" %}
+							<a href="#" class="text-reset">194 friends</a>
+						</div>
+						<div class="col-auto text-success">
+							{% include ui/icon.html icon="check" color="green" %} Verified
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-auto d-none d-md-flex">
+				<div class="btn-list">
+					{% include ui/button.html icon="plus" icon="plus" text="Add to friends" %}
+					{% include ui/button.html icon="plus" color="primary" icon="message" text="Send message" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div class="my-5">
+	<div class="page-header">
+		<div class="row align-items-center">
+			<div class="col">
+				<h2 class="page-title">Gallery</h2>
+				<div class="text-muted mt-1">1-12 of 241 photos</div>
+			</div>
+			<div class="col-auto ms-auto d-print-none">
+				<div class="d-flex">
+					<div class="me-3 d-none d-md-block">
+						<div class="input-icon">
+							<input type="text" class="form-control" placeholder="Search…">
+							<span class="input-icon-addon">
+								{% include ui/icon.html icon="plus" %}
+							</span>
+						</div>
+					</div>
+					<a href="#" class="btn btn-primary">
+						{% include ui/icon.html icon="plus" %}
+						Add photo
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div class="my-5">
+	<div class="page-header page-header-border">
+		<div class="row align-items-center">
+			<div class="col">
+				<h2 class="page-title">Improve cards with no border</h2>
+				<div class="text-muted mt-1">
+					<a href="#" class="text-reset">#693</a>
+					opened by <a href="#" class="text-body">{{ person.full_name }}</a>
+					in <a href="#" class="text-body">Calendar Page</a>
+				</div>
+			</div>
+			<div class="col-auto">
+				<div class="btn-list">
+					{% include ui/button.html icon="plus" icon="edit" text="Edit" %}
+					{% include ui/button.html icon="plus" icon="bell" text="Subscribe" class="d-none d-md-inline-flex" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div class="my-5">
+	<div class="page-header">
+		<div class="row align-items-center mw-100">
+			<div class="col">
+				<div class="mb-1">
+					{% include ui/breadcrumb.html pages="Home,Library,Articles" class="breadcrumb-alternate" %}
+				</div>
+				<h2 class="page-title">
+					<span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
+				</h2>
+			</div>
+			<div class="col-auto">
+				<div class="btn-list">
+					{% include ui/button.html icon="plus" icon="edit" text="Edit" class="d-none d-md-inline-flex" %}
+					{% include ui/button.html color="primary" text="Publish" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div class="my-5">
+	<div class="page-header">
+		<div class="row align-items-center">
+			<div class="col">
+				<div class="page-pretitle">
+					Overview
+				</div>
+				<h2 class="page-title">
+					Dashboard
+				</h2>
+			</div>
+			<div class="col-auto ms-auto">
+				{% include layout/header-actions/buttons.html %}
+			</div>
+		</div>
+	</div>
+</div>

src/scss/layout/_page.scss

@@ -37,6 +37,11 @@
   }
 }
 
+.page-header-border {
+  border-bottom: 1px solid $border-color-transparent;
+  padding-bottom: $content-padding-y;
+}
+
 .page-pretitle {
   @include subheader;
 }
@@ -56,3 +61,13 @@
     margin-inline-end: .25rem;
   }
 }
+
+.page-title-lg {
+  font-size: $h1-font-size;
+  line-height: $h1-line-height;
+}
+
+.page-subtitle {
+  margin-top: .25rem;
+  color: $text-muted;
+}

src/scss/ui/_buttons.scss

@@ -23,13 +23,13 @@
     cursor: not-allowed;
   }
 
-  svg,
+  .icon {
-  i {
     width: $icon-size;
     height: $icon-size;
     margin: 0 .5rem 0;
     margin-inline-start: -.25rem;
     vertical-align: bottom;
+    color: $text-muted;
   }
 
   .avatar {
@@ -54,6 +54,10 @@
   background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
   color: var(--#{$variable-prefix}btn-color-text);
 
+  .icon {
+    color: inherit;
+  }
+
   &:hover {
     color: var(--#{$variable-prefix}btn-color-text);
     background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
@@ -66,6 +70,10 @@
   color: rgba(var(--#{$variable-prefix}btn-color), 1);
   border-color: $border-color-transparent;
 
+  .icon {
+    color: inherit;
+  }
+
   &:hover {
     background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
     color: var(--#{$variable-prefix}btn-color-text);
@@ -90,6 +98,10 @@
   background-color: transparent;
   border-color: transparent;
 
+  .icon {
+    color: inherit;
+  }
+
   &:hover {
     color: $link-hover-color;
     border-color: transparent;

src/scss/ui/_icons.scss

@@ -2,7 +2,7 @@
   width: $font-size-base * $line-height-base;
   height: $font-size-base * $line-height-base;
   font-size: $font-size-base * $line-height-base;
-  vertical-align: sub;
+  vertical-align: bottom;
 
   @if $icon-stroke-width {
     stroke-width: $icon-stroke-width;