Origami Frontend Components & Services

Readme: o-section-head

o-section-head has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

This module is deprecated

Typographic styles and layout for sub-headings. This module contains Sass for section title and a list of related links. This list of related links is optional, and uses o-expander to become collapsable at small screen widths.

Markup

<div class="o-section-head" data-o-component="o-section-head">
    <div class="o-section-head__inner">
        <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>

o-section-head__title should contain the text of the section title. It can be any element, it does not need to he an <h1>.
data-o-expander-collapsed-toggle-text and data-o-expander-expanded-toggle-text should be the title for the list of links. This is only shown at narrow screen widths where the list becomes expandable.

As described in o-link-list, where the <nav> element is used, links should not be in a <ol> or <ul> as this adds more clutter for screen reader users.

Status
dead Origami v1 (Bower)
Switch component view

GitHub: o-section-head

Install o-section-head

If using the Build Service, add o-section-head@^1.0.6 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-section-head@^1.0.6".

Help & Support

o-section-head is maintained directly by the Origami team. If you have any questions about o-section-head 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