Editorial card

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.

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.

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.