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: This block is designed to show image and media content. We put issue/overview content with pictures of supporters, activists and the general public, reinforcing the notion that nothing can be saved or protected without people. In practical terms, an image of something happening in the world should be constantly juxtaposed with the people who are taking action and creating positive change.

Pages: Home (at top)

For content images the max width is 1140px. To ensure quality please supply images with a width of no less than 1140px. An ideal width would be 1440 pixels to allow for any minimal cropping – more on Image Ratio and visuals.

The Header Carousel can be swiped left for S/M sizes on both Right-to-Left and Left-to-right effects, depending on your alphabet..

This style allows a carousel spanning across the full page width using a classic look: big slides, fade transition, and no sub-headers. See all screens here.


Edit mode

Just like any other block, the Carousel Header switched to WYSIWYG, meaning that the options to edit the block are on the rigth side and content edits, such as title and short description for each image can be done directly on the editor.

The carousel elements can easily be switched by drag and drop.

Frontend rendering


Carousel Autoplay

Editable options

When you double click on one image on the right side of the block, you have the option to add an URL, to decide if to open it in a new tab or no and to establish the image focal point.

You will see a circle with blue margins on the image. Drag and drop it on the image where you want the focus point to be OR add numbers in the Horizontal Pos. and Vertical Pos. spaces.


Do’s & Don’ts

Do’s:

You should use as much as possible:

Examples:

Dont’s:

To secure the text and call to action legibility, you should avoid using as much as possible:

Examples:


Design Elements

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


Links & Resources