A page with an image
How to use a 'primary' page image
A single image can appear in a variety of ways: in the main body of a page, in navigation links and in previews that appear when sharing on social media.
This page show the default layout after an image has been added. A 'fluid' version of the image appears below main H1 heading, again in the 'sub navigation' version, and is available for use with the Open Graph social media preview.
50% Height 'Cover' Image
This page shows a full width image with a height set to 50vh
This page shows a full width image with a height set to 50vh
The height of the image can be set by simply selecting a value from a drop-down menu
Bigger images
Primary images can set to full-width and a variety of heights
Primary images can set to full-width and a variety of heights
This example uses 100% of the viewable area to fill the screen.
A page with a floated image
How to position and scale a 'primary' page image
How to position and scale a 'primary' page image
The primary page image can be floated left or right, and at different sizes
A page with an image
How to use a 'primary' page image
How to use a 'primary' page image
A single image can appear in a variety of ways: in the main body of a page, in navigation links and in previews that ...