Pane grid

A pane grid allows you to display text boxes in a configurable grid layout.

Each pane can include a title, a short paragraph of text and a call to action link. Titles display as level 3 headings (H3) with styling that is specific to panes.

You can display panes in 2 or 3 columns. The panes in each row will automatically adjust to be the same height as the pane with the most content.

Use a pane grid when:

• you have a set of short sections of text that can be easily grouped together
• you need to provide context with links to help the user select the links that are relevant to them.

A pane grid shouldn't be used when:

• more than a short paragraph of text is required
• users won't need additional context to choose between links, or will only need very brief context – consider using a grid of links.
• images are required to convey your message – consider using a card grid.

Pane grids can be created by:

• site builders.

Use the in-place editor to create a pane grid:

1. Click 'Customize this page' in the Drupal menu at the bottom of the page, and then click the plus icon (+) in the blue box at the top of page.
2. Select 'UQ' from the side menu, and then click 'Pane grid'.
3. Enter a title to help page editors identify the panel. This title won't appear on the page.
4. Click 'Add new paragraph' to add a pane.
5. Enter a title (if required) and the pane content. If you need to include a call to action link, add it at end of the content as an arrow link.
6. Click the 'Add another paragraph' button to add more panes to the grid.
7. Under 'Customise display options' select your display options.
8. Click 'Finish' to add the pane grid to the page.
9. Apply the section style to the panel to finalise the layout.
10. Click 'Save' in the Drupal menu at the bottom of the page to publish the changes.

Pane grids can be edited by:

• editors
• site coordinators
• site builders.

Follow the instructions for editing panels on panel pages to edit existing pane grids.

• Make sure your panes are visually distinct against the panel background by choosing an appropriate combination of pane grid theme and section pane style theme.
• Write pane titles and content to be a similar length across all panes to maintain visual balance.
• Use brief and clear pane titles (1 line).
• Keep pane content concise (no more than 4 lines).
• Pane titles display as level 3 headings (H3), so if you add a panel title when you apply the section style, set it to display as a level 2 heading (H2).
• Select a number of columns that will spread the panes evenly across the grid. Avoid creating rows with one or more empty columns if possible.

You can control how pane grids display by selecting display options. Pane grids come in 2 or 3 columns, with options to select the spacing between the panes, and the background colour or borders for all panes in the grid.

You can change these display options at any time without rebuilding the pane grid or removing content. The first option in each list is selected by default.

Spacing

Select from:

• Default: standard spacing
• Vertical spacing: extra space above and below each row of panes.

Theme

Select from:

• Default: transparent background
• Shaded background: panes will display with a light-coloured shaded background
• White background: panes will display with a white background
• Full border: adds a light-shaded border around each pane
• Top and bottom border: adds light-shaded borders at the top and bottom of each pane
• Dark tint: panes will display with dark, semi-transparent background and white text.

Column

Select from:

• 2 Columns
• 3 Columns.

Complete all required fields and as many optional fields as necessary to provide the best user experience.