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.
This is an example of a link
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.
Another link
This is the second column
The colour theme here is slightly different. And there’s no image and no link link.
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 |
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
Details block two
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:
- Add a Group block
- Set alignment to full width, and choose a background colour from the side panel settings
- Within the Group block, add another Group block with default settings
- 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