Page panels

Ask a question Design guidelines

Summary

Content layout system for the content area within the Page component. It divides up the content area into combinations like navigation+content, content+sidebar, etc.

Note this component can only be used once per document, within the #content element; and it cannot be nested.

If you need generic columns of content further down in the DOM, use layout groups.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-page-layout
AMD Module key: N/A
Experimental API: 5
General API: 5.1

Code

HTML

The core layout requires the page panel, a page panel inner and at least one panel - usually a content panel. The extra elements are used across layout variations so do not omit them.

For a simple content area with no divisions:

AخA
 
<div class="aui-page-panel">
    <div class="aui-page-panel-inner">
        <section class="aui-page-panel-content">
            <h2>Page content heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
    </div>
</div>

Navigation (aui-page-panel-nav), sidebar (aui-page-panel-sidebar) and generic items (aui-page-panel-item) can be added as siblings of content (aui-page-panel-content). By default the items are rendered as columns.

A three-column layout:

 
<div class="aui-page-panel">
    <div class="aui-page-panel-inner">
        <nav class="aui-page-panel-nav">
            <!-- content such as a vertical nav -->
        </nav>
        <section class="aui-page-panel-content">
            <!-- main area for content -->
        </section>
        <aside class="aui-page-panel-sidebar">
            <!-- tangential content here -->
        </aside>
    </div>
</div>

The generic item is relatively unstyled - it allows custom extensions to content layouts where required:

 
<div class="aui-page-panel">
    <div class="aui-page-panel-inner">
        <section class="aui-page-panel-item someclass">
            <!-- content -->
        </section>
        <section class="aui-page-panel-item someotherclass">
            <!-- content -->
        </section>
    </div>
</div>

Soy

Called with JavaScript:

 
aui.page.pagePanel({
    tagName: 'section',
    content:
        aui.page.pagePanelNav({
            tagName: 'section',
            content: '...'
        }) +
        aui.page.pagePanelContent({
            tagName: 'aside',
            content: '...'
        }) +
        aui.page.pagePanelSidebar({
            tagName: 'nav',
            content: '...'
        })
});

Server-side Soy:

 
{call aui.page.pagePanel}
    {param content}
        {call aui.page.pagePanelNav}
            {param content}
                <p>content</p>
            {/param}
        {/call}
        {call aui.page.pagePanelContent}
            {param content}
                <p>content</p>
            {/param}
        {/call}
        {call aui.page.pagePanelSidebar}
            {param content}
                <p>content</p>
            {/param}
        {/call}
    {/param}
{/call}