📚 Create Content > Blocks > Covers

Purpose: Dynamically display #Tags, Take Action Pages or Posts in a consistent three or four column layout.


P4 Covers’ styles

The Covers block has three different styles — Take 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

Purpose: Display certain kinds of posts (usually publications) in a four column layout. The web editor tells the block which kind of post to select.

Pages: Issues, Explore

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.

Frontend rendering of the Carouser Cover style

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.

Pages: Act, Issue, Campaign

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.

You can also customize the text of the button.

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


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.

Access the Drive with the Background images (including those “Custom” Publication covers)


Settings

The block has the following fields available to edit:

There is also a preview available in the Gutenberg editor.

IMP: 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.


WordPress Cover block

The core WordPress “Cover” block allows to combine colour, background images and other elements all together in a visually appealing way.

Locating the Cover block

When selecting the image and the text, we can customise the opacity of the image, change its focal point, or even change the text colour or its highlight. See .gif below

Customising the WordPress Cover block

Design Elements

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


Links & Resources