Use this component when it’s necessary to highlight content that requires the user to navigate to a sub-page for further detail. Images should have a similar tone and treatment to visually unify the panel.

Cards can be added as either custom cards where all fields are manually set, or as node references where the content of the card comes from the node page being referenced.

Step 1

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

Edit the card grid

Step 2

The menu displays. Select Edit to open the configuration form for the card grid, scroll to the card to be edited and edit the required fields.

  1. Title - Limit the title length, so that it does not exceed 3 lines on the card.
  2. Image - recommended width is 640px. Ensure the image is relevant to the topic of the card.
  3. Content - (optional) brief summary of up to 20 words.

Edit configuration form 1-3

  1. Primary Link - used to create  the hyperlinked card title. If linking to content on the website, follow the steps 4A-4D to insert a relative reference.
    A. Click Search
    B. Type in a minimum of 3 letters of a word in the Search for content field.
    C. Select the Content from the list of suggested content
     

    Card grid Linkit A-C


    D. Click Insert Link.

    card-grid-linkit-d

  2. Action Links - secondary links on the card. Can be used for further information or calls to action.  If linking to content on the website, follow the steps 4 A-D above to insert a relative reference. 

    Note
    If the relative reference is used, the title field will display the title of the content that it is linked to.
    If an absolute reference is used, for content that does not exist on your site, type in an appropriate title and enter the absolute URL in the URL field.

Actin links

  1. Customise display options is restricted to Site builders.

  2. Click Save to save the configured card grid (column card) and return to the panel page.

Save Card grid

For the node reference paragraph type, the system provides a drop-down from which the published content can be selected.  When the node is selected, the title, teaser image and URL from the node (content type) are displayed using the card.

The content types such as basic pages are nodes. Each node has a unique identifier called a node reference.

Step 1

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

Edit the card grid

Step 2

The menu displays. Select Edit to open the configuration form for the card grid, scroll to the card to be edited and edit the node reference by

  1. clicking the drop-down
  2. scroll to the node and click the not to select it

node reference dropdown selection

  1. Click Save to save the configured card grid (column card) and return to the panel page.

save the node reference

This functionality requires Site Builder permissions.

Step 1

Click Customize this page to add the card 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 Card Grid component to open the configuration form.

Add content list

Step 4

The configuration form for the Card Grid displays.  

  1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
     
  2. View mode - For the view mode consider:
    a. the type of card - default, compact or overlay
    b. the column layout for displaying the cards -  select  2, 34 column or horizontal card
     
  3. Paragrah type - there are two types.  For custom card the title, summary and link can be inserted.  If node reference is selected, node (e.g. basic page) title, teaser image and URL  are used for the card.
    a. Select custom card to insert a title, summary and link and proceed OR
    b. Select node reference to select a node to display as a card.

configure new card grid 1-3

  1. Click Add new Paragraph to start completing the first custom card.

Add new paragraph

  1. Title - Limit the title length, so that it does not exceed 3 lines on the card.

  2. Image - recommended width is 640px X 640px. Ensure the image is relevant to the topic of the card.
     
  3. Content - (optional) brief summary of up to 20 words.

Card title and image

  1. Primary Link - used to create  the hyperlinked card title.
    A. Click Search
    B. Type in a minimum of 3 letters of a word in the Search for content field.
    C. Select the Content from the list of suggested content
    D. Click Insert Link.

  1. Action Links - secondary links on the card. Can be used for further information or calls to action.  If linking to content on the website, follow the Step 8 above to insert a relative reference. 

    Note
    A. If the relative reference is used, the title field will display the title of the content that is linked to.
    B. If an absolute reference is used, for content that does not exist on your site, type in an appropriate title and enter the absolute URL in the URL field.

Action links

  1. Click Add another Paragraph to add cards 2 and 3.  Follow the guidance outlined in  numbers 3-9 of Step 4 to complete the required fields for each card.

Add new paragraph

  1. Click Finish to save the configured card grid (column card) and return to the panel page.

Click finish

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 card grid component

  • 2-4 column layout display
  • Image
  • title
  • up to 20-word summary
  • up to 2 action links

2 column card

Column layout display

2 column

2 column layout

3 column

card grid displayed across 3 columns

4 column

card grid display across 4 columns

Horizontal card

horizontal card

 

Card grid fields

Fields displayed:  title (including primary link), body and action links

default display

Compact

Fields displayed:  hyperlinked title

card compact

Overlay

Fields displayed: title and view button (linked to the primary link)

overlay display