1. What is a card grid?

Card grids are a visually engaging way to present important links. Grids are made up of individual squares, which each have an image, title and link.

You can choose from a number of different card styles and widths, and can display cards in 2, 3 or 4 columns. On some cards, you can also display a short summary.

See a card grid

Use a card grid when:

  • links need to be eye-catching and visually engaging
  • you have up to 9 links that can be sensibly grouped together.

A card grid shouldn't be used when:

  • you have more than 9 cards in the grid
  • you don't have appropriate images
  • images would distract from the content
  • a pane grid or grid of links would be better
  • you don't have a link for each card.
Top of page

2. How to create a card grid

Card grids can be created by:

  • site builders.

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

  1. Click 'Customize this page' in the black Drupal menu at the bottom of the page, then click the plus icon (+) in the blue box at the top of page.
  2. Select 'UQ' from the side menu, then click 'Card grid'.
  3. Enter a title to help page editors identify the panel. This title won't appear on the page.
  4. Select a card style option from the 'View mode' drop-down menu.
  5. Add cards following the instructions below.

After you finish adding cards, you can add a section style to the panel to finalise the layout.

Top of page

3. How to edit or add cards

Site builders can:

  • edit existing card content
  • add and reorder cards
  • delete existing card grids
  • change card styles using 'View mode'.

Editors and site coordinators can:

  • edit existing card content
  • add, reorder and delete cards on an existing grid.

Editing cards

To edit or reorder existing cards, follow the instructions for editing panels on panel pages.

Adding a card

You can add cards as either:

  • node references
  • custom cards.

Node reference cards

Node reference cards automatically display a:

  • title
  • teaser image
  • link
  • summary text.

These details are automatically taken from the page you link to. The page has to be on the same site as the card grid and has to be one of the content types under the Drupal 'Content' menu.

Node reference cards are useful because you don't have to upload or enter any card content – all you have to do is link to the node reference. The node can be referenced in multiple places and the content updated in one place.

To add a node reference card:

  1. Select 'Node reference' from the 'Paragraph type' drop-down menu.
  2. Click the 'Add new paragraph' button.
  3. Click the 'Node reference' drop-down menu and locate the page you want to link to.
  4. Click 'Add another paragraph' to continue adding cards, or 'Finish' to end.
  5. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.

Custom cards

You have to add the following details to a custom card:

  • title
  • teaser image
  • link
  • summary text.

Custom cards should be used to link to panel pages on the current site, or to pages on other websites.

To add a custom card:

  1. Select 'Custom Card' from the 'Paragraph type' drop-down menu.
  2. Click the 'Add new paragraph' button.
  3. Enter the card's title. This will display on the page.
  4. Click 'Browse' to select an image from the file browser.
  5. Enter a short summary in the 'Content' field, if required.
  6. Add a link to the card. You can enter either: one 'Primary link', which activates on the card's image and title; or up to two 'Action links', which display at the bottom of the card.
  7. Click 'Add another paragraph' to continue adding cards, or 'Finish' to end.
  8. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.
Top of page

4. Card styles

Card grids come in a variety of widths, styles and column layouts. If you're a site builder, you can control the layout of a card grid through the 'View mode' drop-down menu.

The 'View mode' can be changed at any time. The 'Content' summary field will show or hide, depending on which view mode you choose.

Standard cards

This format shows standard-sized cards with:

  • image
  • title
  • summary
  • primary or action link.

All of these items are stacked vertically.

To use this format, select one of these view modes:

  • 2 Column
  • 3 Column
  • 4 Column.

Compact cards

This format shows smaller cards with:

  • image
  • title
  • primary or action link.

All of these items are stacked vertically. The summary won't display.

To use this format, select one of these view modes:

  • Card Compact 2 Column
  • Card Compact 3 Column
  • Card Compact 4 Column.

Overlay cards

This format shows cards with:

  • image
  • title
  • primary link.

When a user moves their mouse over an overlay card, the image darkens and a 'View' button appears. The card summary and action links won't display.

To use this format, select one of these view modes:

  • Card Overlay 2 Column
  • Card Overlay 3 Column
  • Card Overlay 4 Column.

Horizontal cards

This format shows cards with:

  • image
  • title
  • summary
  • primary link.

To use this format, select 'Card Horizontal' as the view mode.

If you have more than one horizontal card, they will all display in a single column down the page. Action links won't display.

Horizontal cards also have additional formatting options, which apply to all cards in the grid:

  • Alignment: select whether the image displays on the right or left
  • Style: select whether the title and summary appear on a shaded or white background.

One side of the horizontal card will show the image, while the other side will show the title and summary.

Top of page

5. Best practice

  • Write short summaries with similar lengths for visual balance (no more than 2 lines).
  • Use brief and clear titles (1-3 words) and action links (no more than 1 line).
  • Spread cards evenly across the grid. Avoid creating rows with empty columns, if possible.
  • Choose images with a similar look and feel.
  • Optimise images for the web and crop them appropriately.
  • On overlay cards, choose simple images with a good contrast ratio so text is easy to read.
  • Only use horizontal cards for 1 or 2 cards.
Top of page

7. Fields

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

Field name

Required field?

Function

Title

Yes

Administrative title to help page editors identify the panel. Does not appear on the page.

View mode

Yes

Controls how the card grid displays. Default is '3 Column'.

Paragraph type

Yes

Choose the type of card you want to use: node reference or custom card.

Node reference cards

Field name

Required field?

Function

Node reference

Yes

Use the drop-down menu or search to locate a page on the current site.

Custom card

Field name

Required field?

Function

Title

Yes

Primary text on the card.

Image

Yes

Click 'Browse' to select an image from the file browser.

Content

No

Supporting text for the card.

Primary Link

No

Primary link for the card – activates on the image and title. Click the 'Search' button to locate links on the current site.

Action Links > Title

No

Up to 2 call to action links. Maximum 128 characters.

Action Links > URL

Required if you enter an action link title

Click the 'Search' button to locate links on the current site. Use absolute URLs for external links.

Top of page