This is a hero block
It should be the first block on your page.
Hero blocks can also have logos (which can be images or text). Logo images should be:
- transparent jpgs
- have a 3×2 aspect ratio
- centred
Example of the heading block
The text above is displayed using a heading block.
Your headings need to be structured correctly to meet accessibility needs. For example:
- H1
- H2
- H3
- H2
You can’t follow an H1 with an H3.
Example of the image card block
This is an image card block
Image cards are the main way to display text and images together. Images should be 3×2 aspect ratio. Your colour theme controls the choice you have over the colour of the border at the top of the block.
The line below is a separator:
Example of the columns block
You can put blocks into columns to control how it’s presented across the screen. For example, the 2 columns below have image card blocks inside them.
This is an image card block
These are 3 columns each set at 33 percent. They will stack up on a mobile display.
This is the second column
The colour theme here is slightly different. And there’s no image and no link.
This is the third column
I’ve added another image here, and used the text editor to add 2 links below:
Example of the table block
Tables are from the GOV.UK Design System
| Table | With no header section | And fixed width table cells | Four columns and four rows |
| Row 1 | Data | Data | Data |
| Row 2 | Data | Data | Data |
| Row 3 | Data | Data | Data |
| Optional | Footer labels | And | Caption below |
Example of the highlights block
You could use this as a header With a subtitle
You can set most blocks to be two-third or full width of the pages. These highlight blocks are set to full page width.
Highlights Make sure you use colours users can read easily
Other news 85% may look here
Example of the details block
The details block is taken from the GOV.UK Design System. This can make a page easier to scan. It contains information that only some users will need.
Get more information
Example of the buttons block
Buttons are taken from the GOV.UK Design System.
The green button is used to start a service on GOV.UK (this pattern should not be used on any campaign, to avoid confusing users).
Example of the video block
Videos should be embedded from YouTube. Closed captions must be included, as must a text transcript. The transcript can be added on a separate page and linked to from underneath the video.
Example of the social media block
Add details for any social media pages you want to inform users about.