---
title: Headers
section-title: UI Components
docs: true

navgroup: styleguide
navsub: ui-components
navactive: headers
layout: components
---


<h2 class="sg-sectionHeading">Header (signed in)</h2>
<p>Header Component as shown when user is signed in</p>

<div data-js-header-signed-in>
{{#>demo-block }}
{{> f-header }}
{{/demo-block }}
</div>


<h2 class="sg-sectionHeading">Header (signed out)</h2>
<p>Header Component as shown when user is signed out</p>

<div data-js-header-signed-out>
{{#>demo-block }}
{{> f-header }}
{{/demo-block }}
</div>