Feature cards

What's a feature card?

Feature cards are a design feature you can use on the site. They are a clickable link to a page or resource. Feature cards are used on the site to link to webpages. They can be displayed on a page, in columns or as a gallery. They can also be added to side content.

Feature cards can be

- They can be created with or without an image.

  • Be displayed as a list or in columns.
  • You can add filters which can be optionally displayed in a gallery.
  • They can be dragged and dropped into the order you want them to display.

What can I add to a feature card

  • Images from the media library or from the DigitalNZ thumbnailer.
  • YouTube videos. These are added as an image URL but the card displays a still image with an optional video icon overlay.
  • Title and explanation text. Markdown text is available but any links that are added will not be clickable.
  • Labels which can be used as filters.

Examples

List feature cards

Column feature cards with images


How to create a feature card

Read the instructions below to create a feature card.

Check that the feature card doesn't already exist

  • Do a search in Contentful with content type "feature card".
  • If the feature card does exist see if you can re-use it. Otherwise follow the steps below to create a new one.

Create a new feature card

  • Click on "Add entry" and scroll through the list and click on "Feature card".
  • Add a title.
  • Add a description. The description should be short and informative as it all displays on the card. You aren't able to add any links in the description text.
  • Add a Link to the page or resource that you are featuring.

Optional fields

  • Images: If you are using an image you can add it from the media library or create a new asset.
  • Image URL: Use this field to add a YouTube or link to the Digital NZ thumbnailer. Use the code below to add the YouTube image

https://img.youtube.com/vi/<insert-youtube-id-here>/0.jpg adds black padding top and bottom

https://img.youtube.com/vi/<insert-youtube-id-here>/mqdefault.jpg doesn't have any padding

  • Video play button overlay: You can add a video icon over an image to show that clicking the card will take you to a video.

Principles for using columns with feature cards

  • Use 3 columns if you have side navigation on the page.
  • Use 4 columns if you have no side navigation.