diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml
index c50be4804..bfc5aca70 100644
--- a/src/pages/_data/docs.yml
+++ b/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
diff --git a/src/pages/_docs/page-headers.md b/src/pages/_docs/page-headers.md
new file mode 100644
index 000000000..b7dc1d730
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html
index a4e55c9a5..15c51f6bf 100644
--- a/src/pages/_includes/example.html
+++ b/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 %}
diff --git a/src/pages/_includes/layout/page-header-1.html b/src/pages/_includes/layout/page-header-1.html
new file mode 100644
index 000000000..2c07313d8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/_includes/layout/page-header-2.html b/src/pages/_includes/layout/page-header-2.html
new file mode 100644
index 000000000..d31570656
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/_includes/layout/page-header-3.html b/src/pages/_includes/layout/page-header-3.html
new file mode 100644
index 000000000..f29459cdf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/_includes/layout/page-header-4.html b/src/pages/_includes/layout/page-header-4.html
new file mode 100644
index 000000000..1b007bf13
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/_includes/layout/page-header-5.html b/src/pages/_includes/layout/page-header-5.html
new file mode 100644
index 000000000..e9a5a83e0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/page-headers.html b/src/pages/page-headers.html
index 3a99c11d1..3da096a5f 100644
--- a/src/pages/page-headers.html
+++ b/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>
\ No newline at end of file
diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss
index 19cf088ca..06dfc787b 100644
--- a/src/scss/demo/_examples.scss
+++ b/src/scss/demo/_examples.scss
@@ -25,6 +25,10 @@
   color: $body-color;
   flex: 1;
   max-width: 100%;
+
+  .page-header {
+    margin-bottom: 0;
+  }
 }
 
 .example-bg {