Layout

Ask a question Design guidelines

Summary

Layout is a generic layout system, allowing you to quickly and easily set up columns as required.

Note there is a dedicated Page Content Layout system for the overall page content, which must be used in one specific place. Layout is not restricted to any use case and can be placed anywhere you need columns, including inside Content Layout.

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 since: 3.6
General API status: 5.1

Examples

Evenly spaced item

Evenly spaced item

Evenly spaced item

Evenly spaced item

Split group - first item aligned left.

Split group - second item aligned right.

Trio group - first item aligned left.

Trio group - second item aligned centre.

Trio group - third item aligned right.

Code

HTML

The basic setup is simple, for evenly-spaced columns add instances of aui-item inside one instance of aui-group:

Implementation tips

  • Add an aui-group for each discrete group of content - by default, they behave as rows.
  • Add as many aui-item elements to each group as you want - by default, they behave as columns.
  • Do not style the groups and items directly - treat them strictly as containers to divide up areas of the page (see notes below).

Setting item widths:

  • By default, items will be distributed evenly. Add two, they'll be 50% each; add four, 25% each; etc.
  • If you set one item to a fixed width, the remaining items will divide the remaining space evenly amongst themselves.
  • For simple groups, we recommend using a class on the aui-group, with first- last- and nth-child selectors.

Options

There are two preset helpers for common two- and three-column layouts. They are invoked by setting the class on the aui-group and using the required number of items.

Preset Group class Number of items Effect
Split group aui-group-split 2 First column is aligned left, second column is aligned right.
Trio group aui-group-trio 3 First column is aligned left, middle column is center-aligned, third/last column is aligned right.