o-header-services

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

active

Header with title section

If your site has no navigation you can use this top bar on its own.

<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>


</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with primary navigation

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths.

<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#" role="button">
					<span class="o-header-services__visually-hidden">Open primary navigation</span>
				</a>
			</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href="">Docs</a>
			</li>
			<li>
				<a href="">Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with primary navigation and drop down menus

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths, and can be presented as dropdown menus

<header class="o-header-services " data-o-component="o-header-services">
	<div class="o-header-services__top">
			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#" role="button">
					<span class="o-header-services__visually-hidden">Open primary navigation</span>
				</a>
			</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li data-o-header-services-level="1">
				<a aria-current="true" href="">Docs</a><!--
				--><button class="o-header-services__drop-down-button" type="button" name="button" aria-label="Toggle dropdown menu"></button>
				<ul data-o-header-services-level="2" aria-hidden="true">
					<li>
						<a href="">Principles</a>
					</li>
					<li>
						<a href="">Components</a>
					</li>
					<li>
						<a href="">Services</a>
					</li>
					<li>
						<a href="">Tutorials</a>
					</li>
					<button class="o-header-services__visually-hidden" type="button" name="button">Close dropdown menu</button>
				</ul>
			</li>
			<li data-o-header-services-level="1">
				<a href="">Specs</a><!--
				--><button class="o-header-services__drop-down-button" type="button" name="button" aria-label="Toggle dropdown menu"></button>
				<ul data-o-header-services-level="2" aria-hidden="true">
					<li>
						<a href="">Condensed Spec</a>
					</li>
					<li>
						<a href="">Formal Spec</a>
					</li>
					<li>
						<a href="">Components</a>
					</li>
					<li>
						<a href="">Services</a>
					</li>
					<li>
						<a href="">Manifest</a>
					</li>
					<button class="o-header-services__visually-hidden" type="button" name="button">Close dropdown menu</button>
				</ul>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Header with a primary and a 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-services">
	<div class="o-header-services__top">
			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#" role="button">
					<span class="o-header-services__visually-hidden">Open primary navigation</span>
				</a>
			</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href="">Docs</a>
			</li>
			<li>
				<a href="">Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

	<nav class="o-header-services__secondary-nav" aria-label="secondary" data-o-header-services-nav="">
		<div class="o-header-services__secondary-nav-content" data-o-header-services-nav-list="">
			<ol class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors" aria-label="Ancestor sections">
				<li>
					<a href="">Documentation</a>
				</li>
				<li>
					<a href="">Tutorials</a>
				</li>
			</ol>

			<ul class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children" aria-label="Child sections">
				<li>
					<a href="">Build Service</a>
				</li>
				<li>
					<a aria-current="true" href="">The manual build process</a>
				</li>
			</ul>
		</div>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--left" title="scroll left" aria-hidden="true" disabled></button>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--right" title="scroll right" aria-hidden="true" disabled></button>
	</nav>
</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Product theme: B2C

B2C theme for this header component. If you're creating a product that isn't within B2B or B2C please contact Origami.

<header class="o-header-services o-header-services--b2c" data-o-component="o-header-services">
	<div class="o-header-services__top">
			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#" role="button">
					<span class="o-header-services__visually-hidden">Open primary navigation</span>
				</a>
			</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href="">Docs</a>
			</li>
			<li>
				<a href="">Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

	<nav class="o-header-services__secondary-nav" aria-label="secondary" data-o-header-services-nav="">
		<div class="o-header-services__secondary-nav-content" data-o-header-services-nav-list="">
			<ol class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors" aria-label="Ancestor sections">
				<li>
					<a href="">Documentation</a>
				</li>
				<li>
					<a href="">Tutorials</a>
				</li>
			</ol>

			<ul class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children" aria-label="Child sections">
				<li>
					<a href="">Build Service</a>
				</li>
				<li>
					<a aria-current="true" href="">The manual build process</a>
				</li>
			</ul>
		</div>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--left" title="scroll left" aria-hidden="true" disabled></button>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--right" title="scroll right" aria-hidden="true" disabled></button>
	</nav>
</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>

Product theme: B2B

B2B theme for this header component. If you're creating a product that isn't within B2B or B2C please contact Origami.

<header class="o-header-services o-header-services--b2b" data-o-component="o-header-services">
	<div class="o-header-services__top">
			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#" role="button">
					<span class="o-header-services__visually-hidden">Open primary navigation</span>
				</a>
			</div>
		<div class="o-header-services__logo"></div>
		<div class="o-header-services__title">
			<a class="o-header-services__product-name" href="/">Tool or Service name</a>
			<span class="o-header-services__product-tagline">Tagline to explain the product here</span>
		</div>
		<ul class="o-header-services__related-content">
			<li>
				<a href="">XXXX</a>
			</li>
			<li>
				<a href="">Sign in</a>
			</li>
		</ul>
	</div>

	<nav class="o-header-services__primary-nav" aria-label="primary">
		<ul class="o-header-services__primary-nav-list">
			<li>
				<a aria-current="true" href="">Docs</a>
			</li>
			<li>
				<a href="">Specs</a>
			</li>
			<li>
				<a href="#">Registry</a>
			</li>
		</ul>
	</nav>

	<nav class="o-header-services__secondary-nav" aria-label="secondary" data-o-header-services-nav="">
		<div class="o-header-services__secondary-nav-content" data-o-header-services-nav-list="">
			<ol class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors" aria-label="Ancestor sections">
				<li>
					<a href="">Documentation</a>
				</li>
				<li>
					<a href="">Tutorials</a>
				</li>
			</ol>

			<ul class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children" aria-label="Child sections">
				<li>
					<a href="">Build Service</a>
				</li>
				<li>
					<a aria-current="true" href="">The manual build process</a>
				</li>
			</ul>
		</div>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--left" title="scroll left" aria-hidden="true" disabled></button>
		<button class="o-header-services__scroll-button o-header-services__scroll-button--right" title="scroll right" aria-hidden="true" disabled></button>
	</nav>
</header>

<div class="dummy-text">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et, lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor. Vivamus vehicula dictum ipsum, a porta ex fermentum in.
	</p>
	<p>
		Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae. Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan nisl.
	</p>
</div>
Bower Dependencies
o-brand ^3.2.0
o-buttons ^5.15.0
o-colors ^4.7.2
o-grid ^4.4.5
o-icons ^5.9.0
o-normalise ^1.6.2
o-utils ^1.0.5
o-typography ^5.8.0
o-visual-effects ^2.0.3
GitHub Repository

Quickstart

Build Service

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

o-header-services@^3.0.3

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"@"^3.0.3"

For more information see the Origami build process.