Origami Frontend Components & Services

Readme: o-aside-panel

o-aside-panel 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 component has now been deprecated.

Content module with a heading and one or more panels.


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.


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 class="o-aside-panel__body">
        o-aside-panel body content

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>
    <div id="oPanelContent1" class="o-aside-panel__body">
        o-aside-panel body content 1
    <div id="oPanelContent2" class="o-aside-panel__body">
        o-aside-panel body content 2
    <div id="oPanelContent3" class="o-aside-panel__body">
        o-aside-panel body content 3

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


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.


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.


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.


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

dead Origami v1 (Bower)
Switch component view

GitHub: o-aside-panel

Install o-aside-panel

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

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

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