Origami Frontend Components & Services

Demos: o-header-services active

This version of o-header-services hasn't been branded yet. Please check the latest version, 3.2.9, as branding is a relatively new addition to our components.

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>
Switch component view

GitHub Repository

Install o-header-services

If using the Build Service, add o-header-services@^2.0.5 to your script and link tags.

If running a Manual Build, run bower install --save "o-header-services@^2.0.5".

Help & Support

o-header-services is maintained directly by the Origami team. If you have any questions about o-header-services or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com