Design and content
An editorial card gives people enough information to make a considered decision whether to click or tap. It is a good way of presenting content consistently without overloading a page with information.
An editorial card displays an image and short title with options to include a supporting line or contextual title. It links to a single destination.
The editorial card can have an optional label to show a category or tag associated with the content or a paragraph if the title alone does not describe the content accurately.
Cards are responsive and adapt well to changing views, whether displaying few cards or many.
Editorial cards are ideal for presenting general, prose information on different subjects. If you are using cards to present a group of items that share common features or characteristics, for example data imported from a spreadsheet, consider using product cards instead.
See examples of the editorial card component in use on coop.co.uk.
Don’t use buttons or links to other destinations within a card as this may cause confusion or uncertainty for users.
The entirety of a card should be active, to create a large, easily clickable area.
For more information see our general guide on accessibility.
Suggest a pattern or change
Use this form to suggest a new pattern or a change to an existing one.