AUI

  • Documentation Components Upgrade guides
  • Support Getting started FAQ
  • Version 8.1
    9.5.0 Latest 9.4.8 9.3.15 9.2.9 9.1.10 9.0.6 8.8.3 8.7.5 8.6.2 8.5.3 8.4.5 8.3.12 8.2.4 8.1.8 8.0.11 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
General UI components
  • Avatars
  • Badges
  • Banners
  • Buttons
  • Dropdowns
  • Dialog 2
  • Expanders
  • Flags
  • Inline dialogs
  • Icons
  • Labels
  • Lozenges
  • Messages
  • Progress indicators
  • Progress trackers
  • RESTful tables
  • Spinners
  • Sortable tables
  • Tables
  • Tabs
  • Toolbar 2
  • Tooltips
  • Triggers
Forms and form components
  • Forms
  • Form labels
  • Form notification
  • Form validation
  • Date pickers
  • Single selects
  • Select2
  • Toggle buttons
Page and content structure
  • Typography
  • Page layout
  • Page headers
  • Page panels
  • Content groups
  • Navigation patterns
  • In-product help patterns
  • Application header
  • Sidebar
  • System notification
AUI resources
  • Helper functions
  • Hidden and assistive CSS
  • Internationalisation
  • Keyboard shortcuts
  • Soy
  • Template deprecated

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

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:

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
  • 8.1
Atlassian