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

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

TableWith no header sectionAnd fixed width table cellsFour columns and four rows
Row 1DataDataData
Row 2DataDataData
Row 3DataDataData
OptionalFooter labelsAndCaption below
Table 1: showing a sample table

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
Can give more detail or definitions for those who need it

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.