diff --git a/src/pivotal-ui/components/header/header.scss b/src/pivotal-ui/components/header/header.scss
index d388bd3a0..ba4addf43 100644
--- a/src/pivotal-ui/components/header/header.scss
+++ b/src/pivotal-ui/components/header/header.scss
@@ -95,6 +95,7 @@ header {
   font-size: 16px;
   padding: 0.875em 20px 0.0625em;
   border-bottom: 1px solid #d3d3d3;
+  max-height: $header-height-max-sm;
   background: $header-color;
   color: $header-text-color;
   display: flex;
@@ -102,6 +103,14 @@ header {
   justify-content: space-between;
   align-items: center;
 }
+header.hero-transparent {
+  background: transparent;
+  border-bottom: 0;
+}
+header.hero-transparent + .pane {
+  margin-top: $header-height-max-sm;
+  padding-top: -($header-height-max-sm);
+}
 header > .header-item {
   flex: 1 auto;
 }
@@ -271,6 +280,7 @@ header a:hover {
 
 @media (min-width: $desktopMinWidth) {
   header {
+    max-height: $header-height-max-lg;
     flex-direction: row;
     flex-wrap: wrap-reverse;
     padding: 0 20px;
@@ -316,10 +326,6 @@ header a:hover {
   header > .header-nav-menu-container .nav-menu-container {
     max-width: 550px;
   }
-  header.hero-transparent {
-    background: transparent;
-    border-bottom: 0;
-  }
   header.hero-transparent + .pane {
     margin-top: -6em;
     padding-top: 6em;
diff --git a/src/pivotal-ui/components/header/package.json b/src/pivotal-ui/components/header/package.json
index b1fc6478b..3105a210b 100644
--- a/src/pivotal-ui/components/header/package.json
+++ b/src/pivotal-ui/components/header/package.json
@@ -4,5 +4,5 @@
       "@npmcorp/pui-css-drop-down-menu": "^1.3.0",
       "pui-css-typography": "^2.0.0"
     },
-  "version": "1.7.0"
+  "version": "2.0.0"
 }
\ No newline at end of file
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
index bb77a9be4..0b5ac7476 100644
--- a/src/pivotal-ui/components/pui-variables.scss
+++ b/src/pivotal-ui/components/pui-variables.scss
@@ -1326,4 +1326,7 @@ $header-subtle-text-color: rgba(255,255,255,0.8);
 $header-nav-highlight-bg: #a42b2b;
 $desktopMinWidth: $screen-sm;
 $greigh: rgba(195,195,195,1); // median greigh
-$greigh3: rgba(black, 0.6);
\ No newline at end of file
+$greigh3: rgba(black, 0.6);
+
+$header-height-max-sm: 7.478125em;
+$header-height-max-lg: 8.315625em;
\ No newline at end of file
diff --git a/src/pivotal-ui/components/viewport-panes/README.md b/src/pivotal-ui/components/viewport-panes/README.md
new file mode 100644
index 000000000..a316f015b
--- /dev/null
+++ b/src/pivotal-ui/components/viewport-panes/README.md
@@ -0,0 +1,8 @@
+```html
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a viewport pane</h1>
+  </div>
+</div>
+
+```
diff --git a/src/pivotal-ui/components/viewport-panes/package.json b/src/pivotal-ui/components/viewport-panes/package.json
new file mode 100644
index 000000000..6ac753e5d
--- /dev/null
+++ b/src/pivotal-ui/components/viewport-panes/package.json
@@ -0,0 +1,9 @@
+{
+  "homepage": "http://styleguide.pivotal.io/layout.html#pane",
+  "dependencies": {
+    "@npmcorp/pui-css-bootstrap": "2.0.0",
+    "@npmcorp/pui-css-panes": "2.0.0",
+    "@npmcorp/pui-css-header": "2.0.0"
+  },
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/viewport-panes/viewport-panes.scss b/src/pivotal-ui/components/viewport-panes/viewport-panes.scss
new file mode 100644
index 000000000..682a655db
--- /dev/null
+++ b/src/pivotal-ui/components/viewport-panes/viewport-panes.scss
@@ -0,0 +1,63 @@
+@import "../pui-variables";
+
+/*doc
+---
+title: Viewport Pane
+name: viewport_pane
+categories:
+ - css_utilities_panes
+ - css_all
+---
+
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
+npm install @npmcorp/pui-css-viewport-panes --save
+</i>
+</code>
+
+Viewport panes are type of [pane](/pane.html) that have a height that is based upon
+the height of your viewport.
+
+You can add the `.viewport-pane` class to the top pane of a layout.
+
+```html_example
+<header>
+  <h1>This is the header</h1>
+</header>
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+
+```
+
+When following a transparent header, the viewport-pane class will allow the pane's color
+to come through
+
+```
+<header class="hero-transparent">
+  <h1>This is the header, you can see the pane below me, through this</h1>
+</header>
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+```
+
+*/
+
+.viewport-pane {
+  height: calc(100vh - $header-height-max-sm);
+}
+
+.hero-transparent + .viewport-pane {
+  box-sizing: content-box;
+}
+
+@media (min-width: $screen-sm-min) {
+  .viewport-pane {
+    height: calc(80vh - $header-height-max-lg);
+  }
+}