Last reviewed: 4 June 2021


Editorial card

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


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.


An editorial card with all the required elements.

Required elements


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


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


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.


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.


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

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.


Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

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