Content blocks (standard)

A flexible page not tied to any specific content type, with optional hero image, and Formie embed for forms

Large heading (H2)

Medium heading (H3)

Small heading (H4)

Use for h2, h3, h4 headings. In the settings tab, the heading’s size can be adjusted and the heading can be added to jump links.

Text

Use for paragraphs, bullet point lists, numbered lists. 

Paragraph text can be strong, have emphasis and contain links.

  • Bulleted lists can be used make blocks of text easier to read, and to break information into manageable chunks.
  • Bulleted list item text can be strong, have emphasis and contain links.
  1. Numbered lists can be used instead of bulleted lists when the order of the items is relevant.
  2. Numbered list item text can be strong, have emphasis and contain links.

Pictogram lists

  • Pictogram lists can be used instead of bulleted lists to illustrate a set of related points.

  • Each pictogram list item text can be strong for emphasis and contain links.

  • Here’s another pictogram list item lorem ipsum dolor.

Blockquote

Blockquotes are unique content quoted from another source.” 

— Quote attribution

Inset text

Inset text helps users identify and understand important content on the page. It can contain paragraphs and lists. Use inset text sparingly; it’s less effective if overused.

Pullquote

Pull quotes are short snippets of text repeated from the main content and presented on the page as an attention-grabbing visual element 

Stats

£8.8m

large statistic

0.123%

large statistic

£888,888

large statistic

Action links

Action links can be used for internal links, external links and downloadable asset links.

Accordions

People

People block can be used for team members bios. If a photo is not supplied the image will fall back to an icon.

Image

Images will be displayed in 16:9 ratio as a default. Select the​“Fit (non-crop)” option in the settings tab to display the images without cropping.

Image caption is optional and used to convey additional information that is either not present or tangentially related to the picture. Image: Optional attribution 

Video

Logos

Chart

Chart title: should describe the trend

Chart subtitle should provide a specific description of the data used in the chart

Source: [Name of publication or source of data] from [Name of organisation]

Form

Let users enter a single line of text

Let users enter more than one line of text

Checkbox input

Let users select one or more options from a list

Radio input

Let users select only one option from a list

Let users choose from a long list of options, but only use it as a last resort instead of radios

Large call to action

A large eye-catching block used to persuade users to perform an action, such as moving to another page, signing up to an event or making a donation. Ideally should only be used once per page to make the desired action clear to users.

Action button

Related content