Documentation

Layout (group and item)

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

Examples

Code

HTML

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

<div class="aui-group">
    <div class="aui-item">
        <!-- your content here -->
    </div>
    <div class="aui-item">
        <!-- your content here -->
    </div>
</div>
            

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 evently. 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 evently 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.