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.
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.
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.
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
|4 June 2021||First version of page published|