2. Components

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 (). Click the icon to display the menu.

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 image dimensions 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.

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

   

   
   D. Click Insert Link.

   

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

6. Customise display options is restricted to Site builders.

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

Recommended image dimensions: 640px by 640px

Best practice

• If possible, choose an image which is free of other distractions where the person, subject or object is the main focal point of the image.

Avoid these mistakes

Text over faces

• Ensure text does not obscure faces.

Busy images

• Image is far too busy with no clear focus or subject matter.
• Lack of a tint makes the text illegible.

Lack of context

• Ensure your chosen image clearly supports the text. In the example below, the image is lacking context and is not engaging

Why does my image get cropped and scaled into different sizes?

Instead of having to supply a different image for each component, we use the one image, but across many components. This results in the one image being resized and cropped across many variations for mobiles, tablets and desktop screens. Below is a guide of how your original image can get cropped.

Crop free region

In this 640 by 480 example, the image shows a 290 by 325 pixel crop free zone, where anything inside this area won’t get cropped out. Depending on which component you choose and what device you’re viewing the image on (Mobile vs Desktop), your original image will get cropped and resized to various degrees as roughly depicted in the examples below. The image is always cropped out from the centre, and is scaled due to responsive design.

Importance of placement

When considering the crop free region, it is worth noting that anything in this region will not get cropped out in any of the components. Is it therefore advisable to place any important aspects of the photo within this region, to avoid the potential of it getting cropped out on various devices.

Cropping variations

Showing how your image can appear in different components