Last reviewed: 14 April 2021

Components

Feature card

Use feature cards to highlight a deal or that something new has been added to the website. Feature cards link to a page with more information.

Required elements

Title

The title should:

  • be no more than 62 characters in length
  • make it clear what the user will find on the page that the card links to

Image

The image must relate to the content.

It must have an alt tag that describes the image content. For more information, go to the accessibility standard for alternative text.

If you are creating a feature card in our content management system Contentful, you should upload a 780px (width) × 438px (height) image. Contentful will then generate and add the required image sizes.

If you are creating a feature card using the code, consider image quality across both retina and non-retina devices.

Squircle

The feature card should use one of the squircle options to highlight either a category, price or price reduction.

Using feature cards on a page

Using feature cards in a row

You should not use more than 3 feature cards in a row. You should lay these out using the grid.

The grid will help you to set the number of columns the feature card is displayed over for different screen sizes.

If you’re creating the feature card in Contentful, you’ll be able to choose from a range of layout options.

You can choose a horizontal format that allows 2 cards to sit across the page.

Examples

Feature cards used in a row of 3

A row of 3 feature cards using the standard format.

Feature cards used in a row of 3

A row of 2 feature cards using the horizontal format.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.