Page panels

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

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:

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:

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

Soy

Called with JavaScript:

Server-side Soy: