o-section-head
A section heading to sit between the Financial Times header and the page content, indicating a section
deprecated
Standard
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>
<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 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<script> and <link> tags.
o-section-head@^1.0.5
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.