page headers demo

src/pages/_data/docs.yml

@@ -61,6 +61,9 @@ components:
     modals:
       title: Modals
       url: docs/modals.html
+    page-headers:
+      title: Page headers
+      url: docs/page-headers.html
     progress:
       title: Progress
       url: docs/progress.html

src/pages/_docs/page-headers.md

@@ -0,0 +1,24 @@
+---
+menu: docs.components.page-headers
+---
+
+{% capture code %}
+{% include layout/page-header-1.html %}
+{% endcapture %}
+{% include example.html code=code %}
+
+
+{% capture code %}
+{% include layout/page-header-3.html %}
+{% endcapture %}
+{% include example.html code=code %}
+
+{% capture code %}
+{% include layout/page-header-4.html %}
+{% endcapture %}
+{% include example.html code=code %}
+
+{% capture code %}
+{% include layout/page-header-5.html %}
+{% endcapture %}
+{% include example.html code=code %}

src/pages/_includes/example.html

@@ -4,7 +4,7 @@
 {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
 {% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
 
-<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
+<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns or include.light %} example-bg{% endif %}">
 	<div class="example-content">
 		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
 		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}

src/pages/_includes/layout/page-header-1.html

@@ -0,0 +1,29 @@
+{% assign person = site.data.people[0] %}
+<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">
+			{% include ui/button.html icon="plus" color="primary" icon="message" text="Send message" %}
+		</div>
+	</div>
+</div>

src/pages/_includes/layout/page-header-2.html

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

src/pages/_includes/layout/page-header-3.html

@@ -0,0 +1,19 @@
+{% assign person = site.data.people[1] %}
+<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>

src/pages/_includes/layout/page-header-4.html

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

src/pages/_includes/layout/page-header-5.html

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

src/pages/page-headers.html

@@ -4,129 +4,23 @@ page-header: Page headers
 menu: base.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>
+	{% include layout/page-header-1.html %}
 </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>
+	{% include layout/page-header-2.html %}
 </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>
+	{% include layout/page-header-3.html %}
 </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>
+	{% include layout/page-header-4.html %}
 </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>
+	{% include layout/page-header-5.html %}
 </div>

src/scss/demo/_examples.scss

@@ -25,6 +25,10 @@
   color: $body-color;
   flex: 1;
   max-width: 100%;
+
+  .page-header {
+    margin-bottom: 0;
+  }
 }
 
 .example-bg {