Documentation

Page content layout

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 layouts further down the DOM, use group+item.

Status

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:

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

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

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:

atlassian.page.pagePanel({
    tagName : 'section',
    content :
        atlassian.page.pagePanelNav({
            tagName : 'section',
            content : '...'
        }) +
        atlassian.page.pagePanelContent({
            tagName : 'aside',
            content : '...'
        }) +
        atlassian.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}