Customise a card

Introduction

Figure 1 is an example of a single default card. An individual card can be customised in different ways as explained below. But first, some explanation of the two types of cards, and the different components that can appear on a card.

Figure 1 - The default card appearance

Types of cards: information and navigation

The Card Interface understands two types of card: information, and navigation. The following table summarises the major differences between the two types of cards. The type of card is determined by the type of its matching Blackboard item.

Card	Purpose	Blackboard Item
Information	Display small bit of information	Content item
Navigation	Provide a link to and display a small bit of information about another resource Can have numeric card labels	Content Folder, Web link, Discussion board, Assessment item or any other Blackboard item that produces a link to another resource

Figure 2 shows three cards. The first card is an Information card. The other two cards are Navigation cards.

The Information card does not have an engage button as there is nothing to engage with by clicking. It just provides a bit of descriptive text, which in this case talks about the purpose of this page.

The two Navigation cards have an engage button if the mouse is placed over these cards, then (as shown by the second card Figure 2) in the entire card will be surrounded by a blue border. Clicking on a Navigation card will take the visitor to the link pointed to by the card.

Figure 2 - Collection of two different card types

The components of a card

Each card can be made up of many different components. Each component serves a different purpose and can be used to customise the card. Figure 3 shows a single card with labels identifying each of the major components. The following table provides more detail on each component.

Figure 3 - Components of a Card

Component	Description
Image	A visual intended to help students connect/associate conceptually and emotionally with the item the card represents. Rather than an image this can be a single background colour.
Date	Provides an indication to students as to when they should work on the item. Dates can be explicit (Oct 5) or they can be generic and based on the Griffith University calendar (e.g. Week 5) The date also has a Date Label that can be changed. In Figure 3 the date label is Commencing.
Label	Identifies the type of object the card represents. For Figure 3 the card represents the fifth tutorial. The Card Interface automatically calculates the number. The default label is Module but change be changed.
Title	Matches the Name of the Blackboard item.
Description	The Text of the Blackboard item.
Engage	Provides an additional visual affordance to the viewer that the card is something to be clicked on. The text for this button or whether there is a button can be customised for all cards on the current page.

Adding an image

There are two ways to add (or change) an image, by:

1. Image URL (link).
2. Image upload.

Image URL (link)

Pre-requisite: To use this approach you must know the URL (link) for the image. For example, the URL - https://djon.es/images/GrandCanyon.jpg is for a photo of the Grand Canyon.

You can use Google Images to search for relevant images, or use other images you find online by copying the image URL.

Think twice about using an image URL from the Blackboard content collection

This can cause problems when you copy the course for a new offering.

How to do it

1. Edit the content item for the card you with to customise by adding an image.
2. Paste the URL for your image after (and on the same line) as Card Image: (e.g. Figure 4)
3. Save your changes.

When you view the page, the card should now be displaying the image from the URL you provided (e.g. Figure 5).

Figure 4 - Content item specifying a card image

Figure 5 - Card produced by transforming Figure 4

Troubleshooting: My card image doesn’t appear

To double check that you have the correct URL for the image open a new browser window and paste the image URL into browser location. Your browser should open and display the image.

If it doesn’t then your image URL is incorrect.

Image upload

If you have a digital copy of the image, but don’t have or would prefer not to use a URL then you can upload the image into the Blackboard item.

How to do it

1. Make sure you have a copy of the image on your computer.
2. Edit the content item for your card.
3. Use these instructions to embed an image in the content item and ensure that the Image Description is Card Image.
   It is suggested you embed the image at the bottom of the content item to make it easy to edit the other content.

Figure 6 shows the same content item as Figure 4, but in this case the image is being uploaded into Blackboard. This content item will produce a card that looks the same as Figure 5.