The P4 team is currently running some changes to the site. Please be aware that you might be redirected to some other sources on the world wide web or you will find the content you are looking for in another format. If you notice anything missing, please let us know in the p4-general Slack channel. Thank you!

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


Add the block to your page

Adding Covers in the Gutenberg editor

Covers’ styles

On the top left corner, the editor can select which style they would use. There are three styles available:

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.


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

Content Covers edit mode

The editor has the following fields available to edit:

There is also a preview available in the Gutenberg editor.

Content Covers frontend


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.

Take action covers edit mode

The editor has the following fields available to edit:

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.

Take action covers frontend


Campaign Covers

Purpose: Show related campaigns based on #Tags. The shown campaigns will be #Tag pages which have the same CATEGORY.

Pages: ISSUE pages

Content: The content (Tag Name and Image) for this block is generated by, and links to, the corresponding Tag Page.

Campaign Covers edit mode

The editor has the following fields available to edit:

Campaign Covers frontend


KEY INFOS

 

  • This block automatically pulls out the post Featured Images in a Portrait (vertical rectangle) version – more on Create Posts

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.


Take Action cover UI

There are a set of characteristics defining how the Take Action cards should behave:


Manual override option

The last option of the block allows you to manually choose which content the block should display.

  • KEY INFO> To Manually choose which content, you don’t have to select #Tags   

Design Elements

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


Links & Resources