Use this component when referencing informative / dense content where the context requires a short summary to guide the user to make a selection.

Display features

  •  2 line title
  • no more than 1 paragraph summary, 4 lines maximum
  • consistent line heights
  • call to action link optional
 

pane grid sample

Step 1

Using the mouse, hover the pointer over the right-hand corner of the pane grid component to activate the field and display the Edit cog (Edit menu icon). Click the icon to display the menu and click Edit to open the pane grid form.

edit pane grid

Step 2

The configuration form for the pane grid displays.  

  1. Title - do not edit the title of the component.

Pane

  1. Title - edit to change the title on the pane
  2. Content - edit to update the content.

Edit the pane grid

  1. Spacing - select
  2. Theme - select a display theme
  3. Revision - create a revision to save a version of the component at this point.
  4. Click Save to accept the changes

edit pane grid 4 to 7

This functionality requires Site Builder permissions.

Step 1

Click Customize this page to add the pane grid component to a panel page.

Customise this page

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Click plus to add a component

Step 3

The available components display. Click on the UQ category and then select the Pane grid component to open the configuration form.

Select pane grid

Step 4

The configuration form for the Pane grid displays.  

  1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
  2. Click Add new Paragraph to start completing the first Pane.

configure new pane grid 1 to 2

Pane 

  1. Title - Limit the title length, so that it does not exceed 2 lines.
  2. Content - limit to 1 paragraph summary, maximum of 4 lines. Ensure consistent line heights across all panes in the pane grid.
  3. Click Add another Paragraph.

Configure new pane grid 3-5

Customise Display Options

  1. Spacing
  2. Theme
  3. Click Finish to save the configured pane grid and return to the panel page.

configure pane grid 6-8

Step 5

The system returns to the panel page In-Place Editor.  

  1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

  2. Click Save to complete the process of adding the component.

save panel page changes