Block: Covers

📚 Create Content > Blocks > Covers

Covers

Where to find it

You can find the Covers Block by clicking the plus on the Top Left. It’ll be listed between the Blocks, with the name Covers.

Styles

The Covers block has three different styles — Action, Campaign and Content.

Each style displays a different kind of content in a different format:

1. Take Action — Shows a card for each Take Action page (child pages of the “Act” page), optionally filtered by tags.
2. Campaign — Shows tiles for each tag, useful for letting users browse by topic.
3. Content — Shows cards for pieces of content (blog posts, pages, etc.) optionally filtered by post type and/or tag.

Covers block is a WYSIWYG block, so the title and description can be set on the left side, directly in the block, while all the other options are moved on the right side.

P4 Content Covers

Shows a card for each item of content (posts or pages).

There are two layout options for Content covers:

1. Content – Grid Layout
2. Content – Carousel Layout

Grid Layout

Displays covers in a grid with equally-sized rows and columns.

Carousel Layout

Displays a single row of covers that is horizontally scrollable.

P4 Take Action Covers

Purpose: Display take action covers, categorized by tags or chosen manually. These covers (or cards) are the main way to navigate to engagement content, and MUST be associated to a Take Action page.

This style will pull all the Take action covers associated to Take action pages, corresponding to a tag or several you choose.

The Order of the Take Action covers is by default based on publication date / tags but it can be customized by changing the “Order” setting in the Take Action Page.

For ex, by giving 1 to the Take Action you want to appear first and 2 or 3 or higher to the others will determine the order.

Grid layout

Displays covers in a grid with equally-sized rows and columns.

Carousel Layout

A single row of covers that is horizontally scrollable.

Take Action cover UI

• The entire card should function as a clickable link
• Card height is fixed
• Only show one tag, even if more exist
• Limit card title to 60 characters
• Limit card description to 110 characters
• Limit button text to 20 characters
• Button uses a new style, “Primary CTA small”
• Button stays in the bottom right of the card, even when the card text does not fill the entire space.

Content layout

Ideally, the Content Four Column can be used to dynamically pull out a set of publications related to each other, like our Greek colleagues did with their Annual Reports Page.

Settings

The block has the following fields available to edit:

• Rows to display: you can choose from 1 row, 2 rows, all, meaning that the system will load as many rows with the covers as you want. For eg:
  • 1 row means only 1 row with Take action cards will be displayed automatically, so 3 at number. If the visitor wants to see more there will be a ‘Load more’ button that will give the possibility to load more results. If no more results will be available, there is no ‘Load more’ button displayed.
  • 2 rows means only 2 rows with Take action cards will be displayed automatically, so 6 in total. If the visitor wants to see more there will be a ‘Load more’ button that will give the possibility to load more results. If no more results will be available, there is no ‘Load more’ button displayed.
  • all rows means that all the take action cards are displayed from the very beginning.
• Select tags: select the corresponding tags for the content to be pulled on
• Select post types: select the type of posts you want to be displayed
• Manual override. Select posts: select specifically posts. Once this option is activated, the previous Select post types becomes unavailable.

There is also a preview available in the Gutenberg editor.

⚠ Important : When you type a tag, the Manual override field is not available anymore. Same is valid for the Manual override field: if you start typing specific titles in this section, the Select Tags field will not be available anymore.

Design Elements

All design files of the block are available in the P4 Design Systems > Blocks > Covers

Links & Resources