Manual block of cards

A versatile group of cards used to display multiple links in a block.

Manual block of cards example

Example of the default card variant of the manual block of cards component.
Example of a manual block of cards component viewed on mobile.

When to use a manual block of cards

The manual block of cards (MBOC) component is a versatile component which can be used to display a group of links in rows. It is most suitable for landing pages and can be used to direct users to multiple child pages within a website section. It can also be used to link to other internal and external webpages.

The MBOC component is similar to the you may also be interested in component, however, it has less restrictions. For example an MBOC component is not limited to four cards, can link to external pages and has more visual options for how the cards display.

Key features and behaviour 

There are multiple rendering options for an MBOC component. For example, you can change:

  • the background colour and style of the cards
  • how many cards display per row (two, three or four)
  • whether the cards display as a block or carousel.

These rendering options can be changed in Experience Editor.

How to use a manual block of cards

  1. Create the main overarching manual block of cards component in Content Editor that displays an optional H2 heading and description for the whole block.
  2. Create the individual cards that will sit inside the block by right clicking on the component you have created and inserting a card. A maximum of 12 cards is recommended.

If you have more than 12 cards or users would benefit from being able to filter the cards, you may want to consider using Service Detail Cards that sit on a Service Filter page template.

If you need to display multiple links without images or descriptions, you may want to use the multi column links component instead.

Image dimensions

You will need to upload the image to the Media Library in the correct dimensions (unless you are using the arrow card variant).

Image dimensions

410px by 230px

Recommended word count

Cards have a limited amount of space for text and should be a maximum of one or two sentences.

Header

8-35 characters (with spaces)

Body text

20-35 words

Notes on component usage

  • If you are linking to an internal page, use the page title and page thumbnail for consistency.
  • Where possible, the card description should also be the same as the page description – except for campaign landing pages that need to be tailored to a specific audience or campaign goal.
  • Remember to submit the main overarching MBOC component and all the individual cards when publishing.