This version of this component hasn't been branded yet.

Please check the latest version, 2.3.4, as branding is a relatively new addition to our components.

o-header-services

Responsive page header for minimally branded sites, eg B2B tools, documentation sites, and internal tools.

active

Site title only

If your site has no navigation you can use this top bar only.

<header class="o-header-services" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">
		<div class="o-header-services__ftlogo"></div>
		<div class="o-header-services__title">
			<h1 class="o-header-services__product-name"><a href="/">Tool or Service name</a></h1><span class="o-header-subrand__product-tagline ">Tagline to explain the product here</span>
		</div>
	</div>
</header>

Header with navigation add-on

For sites with a few pages, there is a navigation style available. These nav items collapse into a drawer at narrow screen widths.

<header class="o-header-services" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
		</div>
		<div class="o-header-services__ftlogo"></div>
		<div class="o-header-services__title">
			<h1 class="o-header-services__product-name"><a href="/">Tool or Service name</a></h1><span class="o-header-subrand__product-tagline">Tagline to explain the product here</span>
		</div>
		<div class="o-header-services__related-content">
			<a class="o-header-services__related-content-link" href="#">XXXX</a>
			<a class="o-header-services__related-content-link" href="#">Sign in</a>
		</div>
	</div>
	<div class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-header-services__nav-list">
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</div>
	</div>
</header>
<div class="o-header__drawer--services o-header__drawer o--if-js" id="o-header-drawer" data-o-header-drawer="" data-o-header-drawer--no-js="">
	<div class="o-header__drawer-inner">
		<div class="o-header__drawer-tools">
			<span>Tool or Service name</span>
			<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer">
				<span class="o-header__visually-hidden">Close</span>
			</button>
		</div>
		<nav class="o-header__drawer-menu o-header__drawer-menu--primary" role="navigation" aria-label="Primary navigation">
			<ul class="o-header__drawer-menu-list">
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</nav>
		<nav class="o-header__drawer-menu o-header__drawer-menu--user" role="navigation" aria-label="User navigation">
			<ul class="o-header__drawer-menu-list">
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">XXXX</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">Sign in</a>
				</li>
			</ul>
		</nav>
	</div>
</div>

Header with a primary and secondary navigation

For sites with more than a few sections, a secondary navigation is also available

<header class="o-header-services" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
		</div>
		<div class="o-header-services__ftlogo"></div>
		<div class="o-header-services__title">
			<h1 class="o-header-services__product-name"><a href="/">Tool or Service name</a></h1><span class="o-header-subrand__product-tagline">Tagline to explain the product here</span>
		</div>
		<div class="o-header-services__related-content">
			<a class="o-header-services__related-content-link" href="#">XXXX</a>
			<a class="o-header-services__related-content-link" href="#">Sign in</a>
		</div>
	</div>
	<nav class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-header-services__nav-list">
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</div>
	</nav>
<!-- sub nav markup -->
	<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
		<div class="o-header-services__container">
			<div class="o-header__subnav-wrap-outside">
				<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
					<div class="o-header__subnav-content">
						<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#">
									ancestor section
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#">
									ancestor section
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#" aria-selected="true" aria-label="Current page">
									current section
								</a>
							</li>
						</ol>

						<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
						</ul>
					</div>
				</div>
				<button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
				<button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
			</div>
		</div>
	</nav>
</header>
<div class="o-header__drawer--services o-header__drawer o--if-js" id="o-header-drawer" data-o-header-drawer="" data-o-header-drawer--no-js="">
	<div class="o-header__drawer-inner">
		<div class="o-header__drawer-tools">
			<span>Tool or Service name</span>
			<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer">
				<span class="o-header__visually-hidden">Close</span>
			</button>
		</div>
		<nav class="o-header__drawer-menu o-header__drawer-menu--primary" role="navigation" aria-label="Primary navigation">
			<ul class="o-header__drawer-menu-list">
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</nav>
		<nav class="o-header__drawer-menu o-header__drawer-menu--user" role="navigation" aria-label="User navigation">
			<ul class="o-header__drawer-menu-list">
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">XXXX</a>
				</li>
				<li class="o-header__drawer-menu-item">
					<a class="o-header__drawer-menu-link" href="#">Sign in</a>
				</li>
			</ul>
		</nav>
	</div>
</div>

Product themes

This component is themable. The current available themes are B2B and B2C. If you're creating a product that isn't within B2B or B2C please contact Origami.

<h2>B2C product theme</h2>
<header class="o-header-services o-header-services--b2c" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
		</div>
		<div class="o-header-services__ftlogo"></div>
		<div class="o-header-services__title">
			<h1 class="o-header-services__product-name"><a href="/">B2C Tool or Service name</a></h1><span class="o-header-subrand__product-tagline ">Tagline to explain the product here</span>
		</div>
	</div>
	<nav class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-header-services__nav-list">
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</div>
	</nav>
	<!-- sub nav markup -->
	<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
		<div class="o-header-services__container">
			<div class="o-header__subnav-wrap-outside">
				<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
					<div class="o-header__subnav-content">
						<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#">
									ancestor section
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#">
									ancestor section
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="#" aria-selected="true" aria-label="Current page">
									current section
								</a>
							</li>
						</ol>

						<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
							<li class="o-header__subnav-item">
								<a class="o-header__subnav-link" href="">
									child page
								</a>
							</li>
						</ul>
					</div>
				</div>
				<button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
				<button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
			</div>
		</div>
	</nav>
</header>

<h2>B2B product theme</h2>
<header class="o-header-services o-header-services--b2b" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">
		<div class="o-header-services__hamburger">
			<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
		</div>
		<div class="o-header-services__ftlogo"></div>
		<div class="o-header-services__title">
			<h1 class="o-header-services__product-name"><a href="/">B2B Tool or Service name</a></h1><span class="o-header-subrand__product-tagline ">Tagline to explain the product here</span>
		</div>
	</div>
	<nav class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-header-services__nav-list">
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="#">
						Nav item 1
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 2
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 3
					</a>
				</li>
				<li class="o-header-services__nav-item">
					<a class="o-header-services__nav-link" href="#">
						Nav 4
					</a>
				</li>
			</ul>
		</div>
	</nav>
	<!-- sub nav markup -->
		<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
			<div class="o-header-services__container">
				<div class="o-header__subnav-wrap-outside">
					<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
						<div class="o-header__subnav-content">
							<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#">
										ancestor section
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#">
										ancestor section
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#" aria-selected="true" aria-label="Current page">
										current section
									</a>
								</li>
							</ol>

							<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="">
										child page
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="">
										child page
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="">
										child page
									</a>
								</li>
							</ul>
						</div>
					</div>
					<button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
					<button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
				</div>
			</div>
		</nav>
	</header>
Bower Dependencies
o-assets ^3.0.2
o-header ^7.0.0
o-icons >=4.4.2 <6
o-colors ^4.0.0
o-grid ^4.2.0
o-typography ^5.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-header-services@^2.0.5

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-header-services"@"^2.0.5"

For more information see the Origami build process.