diff --git a/dist/core-styles.header.css b/dist/core-styles.header.css
index 7738e7bf6..c893f7b6e 100644
--- a/dist/core-styles.header.css
+++ b/dist/core-styles.header.css
@@ -1,2 +1,2 @@
 /*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */
-/*! core-styles.header.css */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:rgba(var(--global-color-primary--light-rgb),.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);font-weight:var(--bold);letter-spacing:.025px;line-height:1.4}@media (min-width:992px){.s-header{height:60px}}.s-header .navbar-brand{align-content:center;color:var(--header-text-color);display:grid;margin-right:16px;min-width:176px;padding:0}.s-header,.s-header .navbar-collapse{align-items:stretch}@media (min-width:1200px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}@media (min-width:992px){.s-header .nav-item{display:flex}}.s-header .nav-link{align-items:center;display:flex}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-left:14px;padding-right:14px}@media (max-width:991px){.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-block:8px}}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}.branding-header{--branding-logo-height:24px;align-items:center;background-color:var(--global-color-primary--xx-dark);border-bottom:1px solid var(--global-color-primary--normal);color:var(--global-color-primary--xx-light);display:flex;height:49px;justify-content:center}.branding-seperator{border-left:1px solid var(--global-color-primary--xx-light);height:100%;margin:0 15px;max-height:var(--branding-logo-height);vertical-align:middle;width:1px}.branding-logo{border:none;height:30px;margin:0;padding:0}.branding-logo--short{height:var(--branding-logo-height)}.branding-logo--tall{height:35px}.branding-nsf{height:35px}.branding-tacc{height:var(--branding-logo-height)}.branding-utaustin{height:var(--branding-logo-height)}.portal-logo{border:none;float:left;height:40px;margin:0;padding:0}
\ No newline at end of file
+/*! core-styles.header.css */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:rgba(var(--global-color-primary--light-rgb),.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);font-weight:var(--bold);letter-spacing:.025px;line-height:1.4}@media (min-width:992px){.s-header{height:60px}}.s-header .navbar-brand{align-content:center;color:var(--header-text-color);display:grid;margin-right:16px;min-width:176px;padding:0}.s-header,.s-header .navbar-collapse{align-items:stretch}@media (min-width:1200px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}@media (min-width:992px){.s-header .nav-item{display:flex}}.s-header .nav-link{align-items:center;display:flex}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-left:14px;padding-right:14px}@media (max-width:991px){.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding-block:8px}}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}.branding-header{--branding-logo-height:24px;align-items:center;background-color:var(--global-color-primary--xx-dark);border-bottom:1px solid var(--global-color-primary--normal);color:var(--global-color-primary--xx-light);display:flex;height:49px;justify-content:center}.branding-seperator{border-left:1px solid var(--global-color-primary--xx-light);height:100%;margin:0 15px;max-height:var(--branding-logo-height);vertical-align:middle;width:1px}.branding-logo{border:none;height:30px;margin:0;padding:0}.branding-logo--short{height:var(--branding-logo-height)}.branding-logo--tall{height:35px}.branding-nsf{height:35px}.branding-tacc{height:var(--branding-logo-height)}.branding-utaustin{height:var(--branding-logo-height)}.portal-logo{border:none;float:left;height:40px;margin:0;padding:0}
\ No newline at end of file
diff --git a/dist/trumps/s-header/s-header--with-branding.demo.css b/dist/trumps/s-header/s-header--with-branding.demo.css
new file mode 100644
index 000000000..5bfa46e95
--- /dev/null
+++ b/dist/trumps/s-header/s-header--with-branding.demo.css
@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */:root{--global-font-family:var(--global-font-family--sans);--font-family-sans-serif:var(--global-font-family--sans);--font-family-monospace:var(--global-font-family--mono)}main{padding-block:unset;width:unset}
\ No newline at end of file
diff --git a/dist/trumps/s-header/s-header.demo.css b/dist/trumps/s-header/s-header.demo.css
new file mode 100644
index 000000000..5bfa46e95
--- /dev/null
+++ b/dist/trumps/s-header/s-header.demo.css
@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */:root{--global-font-family:var(--global-font-family--sans);--font-family-sans-serif:var(--global-font-family--sans);--font-family-monospace:var(--global-font-family--mono)}main{padding-block:unset;width:unset}
\ No newline at end of file
diff --git a/dist/trumps/s-portal-nav.css b/dist/trumps/s-portal-nav.css
index 92ede233b..ebac03da6 100644
--- a/dist/trumps/s-portal-nav.css
+++ b/dist/trumps/s-portal-nav.css
@@ -1 +1 @@
-/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}
\ No newline at end of file
+/*! @tacc/core-styles 2.19.0+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}
\ No newline at end of file
diff --git a/src/lib/_imports/trumps/s-cms-nav.html b/src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs
similarity index 95%
rename from src/lib/_imports/trumps/s-cms-nav.html
rename to src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs
index db357c2fb..9ef0ae3ba 100644
--- a/src/lib/_imports/trumps/s-cms-nav.html
+++ b/src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs
@@ -6,7 +6,7 @@
 - Bootstrap class names
 - extra markup (`a > span`)
 -->
-<ul class="s-cms-nav navbar-nav">
+<ul class="s-cms-nav navbar-nav mr-auto">
   <li class="nav-item active">
     <a class="nav-link" href="/"><span>Frontera</span></a>
   </li>
diff --git a/src/lib/_imports/trumps/s-portal-nav.html b/src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs
similarity index 81%
rename from src/lib/_imports/trumps/s-portal-nav.html
rename to src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs
index 6c0388645..34380ef0c 100644
--- a/src/lib/_imports/trumps/s-portal-nav.html
+++ b/src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs
@@ -9,18 +9,12 @@
 <ul class="s-portal-nav navbar-nav">
   <!-- When user is not logged in, there are zero dropdown(-*) classes -->
   <li class="nav-item dropdown">
-    <a
-      class="nav-link dropdown-toggle"
-      href="#"
-      data-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
+    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <i class="icon icon-user"></i>
       <span>username</span>
       <span class="sr-only">Toggle Dropdown</span>
     </a>
-    <nav class="dropdown-menu dropdown-menu-right show">
+    <nav class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="/workbench/dashboard">
         <i class="icon icon-dashboard"></i> My Dashboard
       </a>
@@ -35,4 +29,4 @@
       </a>
     </nav>
   </li>
-</ul>
+</ul>
\ No newline at end of file
diff --git a/src/lib/_imports/trumps/tacc-search-bar.html b/src/lib/_imports/trumps/_tacc-search-bar/_tacc-search-bar.hbs
similarity index 100%
rename from src/lib/_imports/trumps/tacc-search-bar.html
rename to src/lib/_imports/trumps/_tacc-search-bar/_tacc-search-bar.hbs
diff --git a/src/lib/_imports/trumps/s-header.html b/src/lib/_imports/trumps/s-header.html
deleted file mode 100644
index 0e8160786..000000000
--- a/src/lib/_imports/trumps/s-header.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!-- FAQ:
-
-This is the markup of the #s-header, as of 2020-03-11,
-from https://frontera-portal.tacc.utexas.edu/. It has:
-
-- Bootstrap class names
-  (also via `./s-portal-nav.html`)
-  (also via `./s-cms-nav.html`)
-- Bootstrap attributes
-  (also via `./s-portal-nav.html`)
-- multiple internal scope (`s-`) classes
-  (only via `./s-portal-nav.html`)
-  (only via `./s-cms-nav.html`)
-- FontAwesome class names
-  (only via `./s-portal-nav.html`)
-- illegally-nested markup (`ul > div > li`)
-  (only via `./s-portal-nav.html`)
--->
-<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
-  <a class="navbar-brand" href="/">
-    <img
-      src="/static/site_cms/img/org_logos/portal.png"
-      alt="Portal Logo"
-      class="nav-logo-double nav-logo-frontera-double"
-    />
-  </a>
-
-  <button
-    class="navbar-toggler"
-    type="button"
-    data-toggle="collapse"
-    data-target="#navbarsExpandTarget"
-    aria-controls="navbarsExpandTarget"
-    aria-expanded="false"
-    aria-label="Toggle navigation"
-  >
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
-    {% include "./s-cms-nav.html" %} {% include "./s-portal-nav.html" %}
-  </div>
-</nav>
diff --git a/src/lib/_imports/trumps/s-header/config.yml b/src/lib/_imports/trumps/s-header/config.yml
new file mode 100644
index 000000000..df174b173
--- /dev/null
+++ b/src/lib/_imports/trumps/s-header/config.yml
@@ -0,0 +1,11 @@
+context:
+  shouldLoadBootstrap: true
+  shouldLoadCMS: true
+  supportStyles:
+    - ../../assets/core-styles.header.css
+    - ../../assets/core-styles.theme.default.css
+variants:
+  - name: with-branding
+    label: With Branding
+  - name: default
+    label: Without Branding
\ No newline at end of file
diff --git a/src/lib/_imports/trumps/s-header/s-header--with-branding.hbs b/src/lib/_imports/trumps/s-header/s-header--with-branding.hbs
new file mode 100644
index 000000000..3e833815a
--- /dev/null
+++ b/src/lib/_imports/trumps/s-header/s-header--with-branding.hbs
@@ -0,0 +1,32 @@
+<!-- FAQ:
+
+This is the markup of the #s-header, as of 2020-03-11,
+from https://frontera-portal.tacc.utexas.edu/. It has:
+
+- Bootstrap class names
+  (also via `./s-portal-nav.html`)
+  (also via `./s-cms-nav.html`)
+- Bootstrap attributes
+  (also via `./s-portal-nav.html`)
+- multiple internal scope (`s-`) classes
+  (only via `./s-portal-nav.html`)
+  (only via `./s-cms-nav.html`)
+- FontAwesome class names
+  (only via `./s-portal-nav.html`)
+- illegally-nested markup (`ul > div > li`)
+  (only via `./s-portal-nav.html`)
+-->
+<div class="branding-header">
+  <a href="https://www.nsf.gov/" target="_blank">
+    <img class="branding-logo branding-nsf" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.tacc.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-tacc" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-utaustin" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="University of Texas at Austin Logo">
+  </a>
+</div>
+{{> @s-header}}
\ No newline at end of file
diff --git a/src/lib/_imports/trumps/s-header/s-header.demo.css b/src/lib/_imports/trumps/s-header/s-header.demo.css
new file mode 100644
index 000000000..c71fa68b8
--- /dev/null
+++ b/src/lib/_imports/trumps/s-header/s-header.demo.css
@@ -0,0 +1,10 @@
+:root {
+    --global-font-family: var(--global-font-family--sans);
+    --font-family-sans-serif: var(--global-font-family--sans);
+    --font-family-monospace: var(--global-font-family--mono);
+}
+
+main {
+    padding-block: unset;
+    width: unset;
+}
diff --git a/src/lib/_imports/trumps/s-header/s-header.hbs b/src/lib/_imports/trumps/s-header/s-header.hbs
new file mode 100644
index 000000000..e09bf45de
--- /dev/null
+++ b/src/lib/_imports/trumps/s-header/s-header.hbs
@@ -0,0 +1,14 @@
+<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
+  <a class="navbar-brand" href="/">
+    <img src="http://tacc.utexas.edu/static/site_cms/img/org_logos/portal.png" alt="Portal Logo"
+      class="nav-logo-double nav-logo-frontera-double" />
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExpandTarget"
+    aria-controls="navbarsExpandTarget" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+    {{> @s-cms-nav}} {{> @s-portal-nav}}
+  </div>
+</nav>
\ No newline at end of file
diff --git a/src/lib/_imports/trumps/s-portal-nav.css b/src/lib/_imports/trumps/s-portal-nav.css
index 74c304ac9..ae2da4fa1 100644
--- a/src/lib/_imports/trumps/s-portal-nav.css
+++ b/src/lib/_imports/trumps/s-portal-nav.css
@@ -28,3 +28,11 @@ ul.s-portal-nav {
   /* To overwrite @tacc/core-styles */
   text-decoration: none; /* copied from Bootstrap */
 }
+
+
+.s-portal-nav .icon {
+  margin-right: 0.25em;
+
+  font-size: 1.5em;
+  vertical-align: middle;
+}