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.

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.

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.

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.

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

• Creating and editing panel pages
• Content types
• Grid of links
• Images for the web
• Pane grid.

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

Node reference cards

Custom card