Last reviewed: 4 June 2021

Components

Editorial card

An editorial card lets you highlight and link to more in-depth content on another page.

Guidelines

An editorial card should give people enough information to make an informed decision about whether or not to select it.

The whole card should link to one destination. Do not use buttons or links to any other destinations within an editorial card.

Example

An editorial card with all the required elements.

Required elements

Title

The title should:

  • be no more than 90 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.

If you are creating an editorial 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 an editorial card using the code, consider image quality across both retina and non-retina devices.

Optional elements

Label

You can add a label to show a category or tag associated with the content.

This could help people to identify content that interests them.

The label sits above the title.

Paragraph

If you need to include supporting information in your editorial card, you can use a paragraph.

Paragraphs should be no more than 170 characters in length.

The paragraph sits below the title.

Using an editorial card, or cards, on a page

Using up to 3 cards in a row

Do not use more than 3 editorial cards in a row. Lay these out using the grid.

Use the grid to help you to set the number of columns for different screen sizes.

Example

Editorial cards used in a row of 3
3 editorial cards in a row linking to content from Co-op Food.

Using one card in a row

You can adapt the editorial card so that it fills the whole row horizontally.

The CSS class that supports the horizontal format already exists. If you’re unsure, ask the engineers on your team to talk you through it.

Changelog for this page

Date Notes
4 June 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.