The Feature Grid tool helps you structure your content and create visual interest on your pages. It creates a grid of content items containing a title and description, an optional image or icon, and call to action text.

You can make content in a Feature Grid static to make information visually distinctive or link items to other websites or pages and files within your site to make it more interactive.

You can use the Feature Grid in a variety of ways, including:

  • setting up a navigation menu with each item linked to a page containing more detailed information.
  • featuring content to highlight key stats, topics or themes.
  • expressing a call to action that directs people to download a file.
  • curating a list of resources with each item linked to an external website containing relevant information.

The Feature Grid has various style options you can adjust to change its visual appearance to suit your particular content needs.

🖼️ Examples

Here's some examples of how you can configure the Feature Grid tool:

This example shows the 'Card' style with three columns using images from the File Manager with linked content to other site pages.

This example shows the 'Panel (large)' style with 'call to action' text added.

This example shows the 'Panel (small)' style, using icons instead of images to list thematic content.

  • Transport

    Learn about the various ways we move through and into our city.

    Engage 

  • Events

    Learn about all the fantastic events and festivals planned for this year.

    Learn 

  • Pets

    Discover all the best places to visit with your pets and services available around the city.

    Discover 

  • Food

    Delight your senses and discover all the great food and drink establishments on offer.

    Explore 

⚙️Settings

Settings you can configure in the Feature Grid tool:

Basic

  • Features - lists all items displayed in the tool and allows you to add, edit and reorder the content of each item and add new items. For each item, you can adjust the following properties:
    • Image asset - allows you to select an image asset shown for a particular item. You have the option to choose between 'Image', which lets you select an image file from the File Manager (i.e. .jpg, .gif, .svg), 'Icon', which allows you to choose an icon from the built-in icon library (along with the icon colour and background colour), or 'None' which disables any image asset from showing.
    • Feature Title - sets a title shown on the item (limited to 50 characters).
    • Feature Description - sets the description shown on the item (Limited to 500 characters).
    • URL - links the item to a URL of an external website, internal page or file within the File Manager. You can type in the URL of a webpage manually, choose an existing page from the Sitemap, or select an existing file from the File Manager. You also have the option of having the link 'Open in a new window', which opens the link in a new browser tab to maintain the user's current page location.
    • Call to Action Text - sets supplementary text content that directs users to a specific call to action (e.g. 'learn more', 'complete the survey', download the plan', etc.). This text appears at the bottom of the feature card (limited to 30 characters).

Display

  • Style - sets the display style for the feature. You have the option to choose from 'Card', which provides a portrait orientation for items, 'Panel (small)' which provides a landscape orientation for items, or 'Panel (large)', which provides a landscape orientation for items with a bigger image.
  • Number of Columns (Card style only) - sets the maximum number of items (or cards) that appear horizontally in the Feature Grid (available options are 1,2,3,4, or 5). This setting lets you adjust the relative size of the cards.

Advanced

  • Block Title - sets an optional title for the Block.
  • Block Description - sets an optional description for the Block that appears below the Block Title.

🎯 Key Actions

  • Under the Basic tab, select New Feature. The Features screen will display.
  • To add an image, select Choose New File under Image. The File Manager will open.
  • Select an image from the File Manager or upload a new image.
  • Add an alternative description, title and description.
  • Optionally, add a URL to link to and a call to action to label the link.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Style drop-down list.
  • Select the display style of your feature grid.
  • Once complete, select the blue Save button.
  • Under the Display tab, once Card is selected as your display style, open the Number of columns drop-down list.
  • Select how many columns to display your cards into.
  • Once complete, select the blue Save button.
  • Under the Basic tab, locate the feature you wish to reorder.
  • Use the blue up/down arrows to reposition the feature within the list.
  • Once complete, select the blue Save button.
  • Under the Basic tab, select the option Image at the top of the features panel.
  • Click Choose New File to open your document library and select the image you want displayed in your feature.
  • Optionally add an Alternative Description to the image.
  • Once complete, select the blue Save button.
  • Under the Basic tab, select the option Icon at the top of the features panel.
  • Open the Icon drop-down menu to select an option from our icon library.
  • Optionally change the Icon Colour and Background Colour for the icon by opening the drop-down menu for these items.
  • Once complete, select the blue Save button.
  • Under the Basic tab, scroll down and add a URL or select an internal page or file.
  • Optionally select Open In New Window, however generally speaking, from an accessibility point of view, you are only meant to open links in a new window when necessary, such as to an external page.
  • Optionally add a Call to Action Text.
  • Once complete, select the blue Save button.