This component is deprecated.

This component should not be used for new projects. Only the most severe security-related bugs will be fixed for this component, though existing implementations will continue to work. This page is here for existing users to refer to documentation.

o-section-head

A section heading to sit between the Financial Times header and the page content, indicating a section

Readme JSDoc SassDoc
deprecated

Standard

Standard section head

Open Demo in a New Tab 
<div class="o-section-head" data-o-component="o-section-head">
	<div class="o-section-head__inner">
		<div class="o-section-head__container">
			<div class="o-section-head__title-container">
				<h1 class="o-section-head__title">Section title</h1>
			</div>
		  <div class="o-section-head__nav-item-container o-expander" data-o-expander-collapsed-toggle-text="RELATED" data-o-expander-expanded-toggle-text="RELATED" data-o-expander-shrink-to="height" data-o-component="o-expander">
					<button class="o-expander__toggle o--if-js o-section-head__nav-item-toggler">RELATED</button>
					<nav class="o-section-head__nav-item-list o-expander__content">
		        <a class="o-section-head__nav-item" href="#">item 1</a>
		        <a class="o-section-head__nav-item" href="#">item 2</a>
		        <a class="o-section-head__nav-item" href="#">item 3</a>
		        <a class="o-section-head__nav-item" href="#">item 4</a>
		        <a class="o-section-head__nav-item" href="#">item 5</a>
		        <a class="o-section-head__nav-item" href="#">item 6</a>
		        <a class="o-section-head__nav-item" href="#">item 7</a>
					</nav>
		    </div>
		  </div>
		</div>
	</div>
Bower Dependencies
o-colors ^3.0.0
o-grid ^4.0.0
o-expander ^2.0.0
o-link-list ^1.0.0

Support

Email origami.support@ft.com

Slack #ft-origami

Report an issue on GitHub
GitHub Repository

Quickstart

Build Service

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

o-section-head@^1.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-section-head"@"^1.0.5"

For more information see the Origami build process.