Origami Frontend Components & Services

Readme: o-aside-panel

Content module with a heading and one or more panels.

Usage

o-aside-panel provides styling for:

If tabs are used, then o-tabs's JavaScript must also be included in the page to provide the tabs' behaviour. o-tabs is not a dependency of this module.

If multiple panels are used, the module will be sized to accommodate the tallest panel, regardless of which panel is in view.
In other words, any content below will not shift up and down as the panel in view is changed.

Markup

Without tabs

<div data-o-component="o-aside-panel" class="o-aside-panel">
    <div class="o-aside-panel__header">
        <h3 class="o-aside-panel__heading">Heading</h3>
    </div>
    <div class="o-aside-panel__body">
        o-aside-panel body content
    </div>
</div>

With tabs

<div data-o-component="o-aside-panel" class="o-aside-panel">
    <div class="o-aside-panel__header">
        <h3 class="o-aside-panel__heading">Heading</h3>
        <ul data-o-component="o-tabs" class="o-tabs o-aside-panel__tabs" role="tablist">
            <li role="tab"><a href="#oPanelContent1">Tab 1</a></li>
            <li role="tab"><a href="#oPanelContent2">Tab 2</a></li>
            <li role="tab"><a href="#oPanelContent3">Tab 3</a></li>
        </ul>
    </div>
    <div id="oPanelContent1" class="o-aside-panel__body">
        o-aside-panel body content 1
    </div>
    <div id="oPanelContent2" class="o-aside-panel__body">
        o-aside-panel body content 2
    </div>
    <div id="oPanelContent3" class="o-aside-panel__body">
        o-aside-panel body content 3
    </div>
</div>

Note that the o-aside-panel__tabs--theme must also be set on the o-tabs root element.

Sass

As with all Origami components, o-aside-panel has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-aside-panel-is-silent : false; in your Sass before you import the o-aside-panel Sass.

Core experience

No tabs will be shown, and panel bodies will all be shown one below the other.

Primary experience

Tabs will be shown (if declared in markup) and will be functional. Only the panel body for the selected tab will be shown.

Troubleshooting

No tabs are showing, all panels are being shown

That is to be expected for core experience.

Migration guide

Migrating from 2.X.X to 3.X.X

V2 -> V3 introduces the new majors of o-colors and o-typography. Updating to this new version will mean updating any other components that you have which are using o-colors or o-typography. There are no other breaking changes in this release.


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-aside-panel

If using the Build Service, add o-aside-panel@^3.0.3 to your link tag.

If running a Manual Build, run bower install --save "o-aside-panel@^3.0.3".

Help & Support

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