Cards and panes

This guide is for sites built in the new version of Drupal (like Study or Scholarships).
If you're working on a Drupal 7 (UQ Standard) site, see card grids on Drupal 7.

Cards and panes group related content to make it easier for users to scan, read and identify information.

You can only add cards and panes to landing pages.

The guidelines on this page are for grouping content. If you want to highlight a single piece of content, consider an image panel.

Cards link to other webpages and provide context for users to make decisions about which page to visit next. Use cards in most cases when you want to group several related options for users to navigate to.

Features

1 link per card.
The whole card is clickable (including image). The increased touch target size makes cards more accessible and user-friendly than panes with text links.

Guidelines

Use cards when:

you have a series of related links for users to choose between
the intent of the content is to click through rather than staying on the page and reading further content
you only need a small amount of content to help users understand where the link will take them.

Do:

use rows of 2-3 cards
give users context for where the link will take them
feature 1 piece of information per card
keep your text short, simple and meaningful
use image guidelines if your cards will have images.

Avoid using when you:

need a large amount of text to give users context
have differing amounts of text (avoid having one with lots of text and one with not much)
need link text that provides additional context that the card content alone doesn't provide – use a pane
need multiple links per card –use a pane
don't need links – use a pane.

Variants

Variants control the style that displays to users. Using visual elements (such as images or icons) in cards allows for different content to stand out and provides additional context to help users quickly distinguish between pieces of information.

When you create a card, you can choose from the following options:

Text

Use text cards to group a high volume of cards or when images and icons wouldn't support the meaning of the content.

Example of text cards displaying on desktop, with a heading displayed above 3 blocks of text.

Image

Use cards with images to highlight important content on a page. Use images that are meaningful and help users understand the content. Don’t use images for decorative purposes.

Example of image cards on desktop view, with a heading displaying above three blocks of text with accompanying images.

Icon

Use cards with icons to help users understand and scan for content relevant to them. Don’t use icons for decorative purposes.

Icon nav

Use icon cards to help users understand and scan for content relevant to them. Icon nav cards are visually the same as icon cards. However they condense on mobile view so only the card title and icon are visible. This helps users navigate more efficiently on smaller screens.

Make sure the card title provides enough context by itself.

Example of icon nav cards – desktop view.

Example of icon nav cards – mobile view.

Adding cards to a landing page

Create a section, then add cards (blocks) to the section. You can only add cards to the Card/pane section (Design System) section type.

Add a card grid section

Select 'Add section'.
Choose the layout ‘Card/pane section (Design System)’.
Complete the fields:
- Administrative label (optional) – This label isn’t visible to users. Use it to help other editors understand the intent of a section.
- Title (optional) – Add a title to display above the cards. Use keywords and keep your title short and meaningful.
- Description (optional) – Depending on your content needs, use the WYSIWYG (text editor) to add supporting text. Generally this shouldn’t be any longer than a few sentences.
- Type – Select ‘Card’ as the card type.
- Heading level – Choose which heading level your individual cards should have. Consider what headings are above your content on the page. If you're using the Title field for your card section, your cards should have H3 headings.
- Variant – Select the variant. Variants control the style that displays to users.
- Number per row – Select the number of cards that should appear per row. In most cases, select rows of 2 or 3. You can only have 4 cards in a row on pages that don’t have local navigation. Cards will stack on smaller screens.
- Student type (Study website only) – choose from 'Domestic', 'International' or 'Both'.
Select 'Add section'. This adds your section to the landing page.

Add a card block

Select 'Add block' in your new section.
Select 'Create content block'.
Choose 'Card'.
Choose which fields to complete depending on which variant you selected and the purpose of your content.
- Image (optional)
  1. Select 'Add media' to add an image to your card.
  2. Either upload a new image or choose from the images in the media library. Use the filters to narrow your search.
  3. Tick the required image.
  4. Select 'Insert selected'.
- Icon (optional) – choose one from the drop-down list provided.
- Title – add a title for your card. Use titles that set clear expectations for users about the content they link to.
- Description (optional) – outline the main idea with the minimal possible information, don't overload with information as the card links to more detail.
- Link – add the URL you want the card to link to. If the linked page is on the same site, type the page name and select it rather than pasting an absolute URL.
Select 'Add block'. This adds your card to the section.
Follow the same process to add your remaining cards.

Panes provide more flexibility than cards. Use panes to group related links or small pieces of information. Use panes instead of cards when cards won't suit the content.