GOV.UK Crown

This is a hero block. It should be the first element of your page. Logos can be images or text. Logo images should be transparent. Images should be 3×2 aspect ratio, focused at the centre.

An image card element

This is the main way to display text and images together. Images should again be 3×2 aspect ratio. The theme colour sets the border at the top of the block.

Pad with writing

This is a heading

For accessibility reasons, ensure that your heading structure is correct. There is a separator underneath.

Image cards can be put into columns

These are 3 columns each set at 33 percent. They will stack up on a mobile display.

Design poster

This is the second column

The colour theme here is slightly different. And there’s no image and no link link.

This is column three

There’s an image in this one and a couple of different links here, just added in the editor:

Badge reading Think global design loca

Tables are from the GOV.UK Design System

TableWith no header sectionAnd fixed width table cellsFour columns and four rows
Row 1DataDataData
Row 2 DataDataData
Row 3DataDataData
OptionalFooter labelsAnd Caption below
Optional table caption for data source

The highlights block bleeds across the whole page. Paragraphs are set at two-thirds width. Most components can be set to either two thirds or wide width.

Highlights You can’t read this because the text is black

Put big news here 85% may look here

The details component is also taken from the GOV.UK Design System. Use the details component to make a page easier to scan when it contains information that only some users will need.

Details block one
For showing extra information. For showing extra information. For showing extra information. For showing extra information. For showing extra information. For showing extra information.
Details block two
For showing extra information. For showing extra information.

Buttons are again from the GOV.UK Design System. As the page is not a service, it should not have a Start button.

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 from underneath the video as in this example.

Adding a video requires a few steps:

  1. Add a Group block
  2. Set alignment to full width, and choose a background colour from the side panel settings
  3. Within the Group block, add another Group block with default settings
  4. Within child Group block add content, i.e. a Heading block and a YouTube block

This is a Header Include important information in here!

Another one this is a second highlight

The heading for the video

Click here for a transcript

Social media block