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.


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



Standard section head

<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 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>
Bower Dependencies
o-colors ^3.0.0
o-grid ^4.0.0
o-expander ^2.0.0
o-link-list ^1.0.0
GitHub Repository


Build Service

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


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.