Origami Frontend Components & Services

Demos: o-aside-panel

o-aside-panel is deprecated. This component should not be used for new projects. Only security-related bugs will be fixed for this component, though existing implementations will continue to work.

Single

<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>

Multiple

<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>
Switch component view

GitHub Repository

Install o-aside-panel

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

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

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