Most initiatives will be a single page that funnels users to perform a task or find more information. There may also be a child page to list any accompanying resources.
Users are unlikely to read a lot of text, so keep the aim of your initiative short and to the point.
Create a single, clear and direct call to action. You can use up to 3 calls to actions (in separate sections) on your initiative landing page but the simpler the better.
The header consists of a hero (background) image and logo or slogan.
The hero image should be 1920px x 800px.
There are 2 versions of the header, one with the initiative name as text, the other with a logo or graphic.
If using a graphic as text the file should be a transparent PNG and should be no larger than 650px x 305px.
The positioning of the text on the background will be different depending on the device size so it must pass colour contrast wherever it sits on the background.
You can check contrast using a colour contrast tool.
Provide an image to be used when the page is shared, the image should be 1200px x 628px.
The initiative landing page consists of sections. These can contain a combination of components.
Sections are either 1or 2 columns. 1 column content takes up 75% of the section and is centred.
In a 2 column layout, each column is 50% of the section.
The background colour of the sections will alternate white and light blue, unless specific branding is required.
Videos can add richness to an initiative. They can be very effective marketing tools if considered properly.
Use them if they add something to your campaign, and help explain a concept or improve understanding.
Group videos with text that reinforces the same single idea.
A transcript must be provided with all videos for accessibility.
The video can be in the left or right column of the section. The size of the video is 640px x 360px.
We add max-width:100%; max-height:100%; as an inline style to keep the video responsive.
Videos should be produced and delivered in ways that ensure that all members of the audience can access their content. An accessible video includes captions, a transcript, and if appropriate an audio description and is delivered in an accessible media player.
Images must add to the initiative's messaging and should be unique to the initiative. Group images with text that reinforces the same single idea.
The image can be in the left or right column.
Images should be around 800px wide so they can be scaled depending on the content in the other column.
You can add parallax to the image to give the page a sense of movement.
Cards can have a combination of image, title and lead in sentence.
The image is 490px x 215px.
Cards are in groups of 2 or 3.
Up to
infographics per row
Infographics can include
an icon, top line text, statistic and bottom line text
Only use
fact or figure per infographic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem ipsum tempor quam, et lobortis sem ex in ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem.
Person's name
Resources can be added to the initiative landing page.
Example link to a PDF file
PDF | 5.95 MB
More resources
Tagged news can be embedded. This will show the latest 3 news items for a specific tag.
