AUI

  • Documentation Components Upgrade guide
  • Support Getting started FAQ
  • Version 7.9
    9.4.1 Latest 9.3.5 9.2.4 9.1.9 9.0.6 8.8.2 8.7.4 8.6.2 8.5.3 8.4.5 8.3.11 8.2.4 8.1.7 8.0.8 7.9.11 7.8.3 7.7.6 7.6.3 7.5.3 7.4.0 7.3.4 7.2.1 7.1.1 7.0.1 6.1.3 6.0.9 5.9.24
    Older versions Changelog
Web components
  • AUI Label experimental
  • Badges
  • Dropdown
  • Inline dialog
  • Progress indicator
  • Single select
  • Spinner
  • Toggle Button
Other components
  • AUI Select2
  • Avatars
  • Banners
  • Buttons
  • Date picker
  • Dialog 2
  • Expander
  • Flag
  • Forms
  • Form notification experimental
  • Form validation experimental
  • Icons
  • In-product help
  • Labels
  • Lozenges
  • Messages
  • Progress tracker
  • RESTful table
  • Sortable table
  • Tables
  • Tabs
  • Toolbar 2
  • Tooltips
  • Trigger
Content structure
  • Typography
  • Hidden and assistive CSS
Page layouts
  • Application header
  • Layout
  • Navigation
  • Page
  • Page content layout
  • Page header
  • Sidebar
  • System Notifications
AUI resources
  • Helper functions
  • Keyboard shortcuts
  • Soy experimental
  • Template
Deprecated components
  • Dialog 1
  • Dropdown 2
  • Inline dialog 1

Page content layout

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

Status

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
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:

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:

  • Copyright © 2009- Atlassian
  • License
  • Changelog
  • 7.9
Atlassian