AUI

  • Documentation Components Upgrade guides
  • Support Getting started FAQ
  • Version 8.8 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.8
Atlassian