o-aside-panel

This component has now been deprecated.

---

Content module with a heading and one or more panels.

• Usage
  • Markup
  • Sass
• Troubleshooting
• Contributing
• Migration guide
• Contact
• Licence

Usage

o-aside-panel provides styling for:

• Heading
• Tabs (optional)
• Panel body (minimum of 1), but not panel contents

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.