This component hasn't been branded yet.

If you would like to discuss having it branded please get in touch with the Origami team.

o-aside-panel

Content panels

active

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>
Bower Dependencies
o-colors ^4
o-typography ^5
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-aside-panel@^3.0.3

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-aside-panel"@"^3.0.3"

For more information see the Origami build process.