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