Content blocks (landing)

Introductory pages for a particular subject area, providing an overview of the subject, and links to related child pages

Body text can be strong for emphasis and contain links lorem ipsum dolor sit amet, consectetur adipiscing elit egestas luctus lectus dignissim tristique.

X‑large heading (H2)

Large heading (H3)

Medium heading (H4)

  • Bulleted lists can be used make blocks of text easier to read, and to break information into manageable chunks.
  • Each bulleted list item text can be strong for emphasis and contain links.
  • Here’s another bulleted list item.
  1. 1

    Numbered lists can be used instead of bulleted lists when the order of the items is relevant.

  2. 2

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

  3. 3

    Here’s another numbered list item.

  • 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.

Blockquotes are unique content quoted from another source.” 

— Quote attribution

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.

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

£8.8m

large statistic

0.123%

large statistic

£888,888

large statistic

Image caption is optional and used to convey additional information that is either not present or tangentially related to the picture. Image: Optional attribution 
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]

Side by side text and image

Body text can be strong for emphasis and contain links lorem ipsum dolor sit amet, consectetur adipiscing elit egestas luctus lectus dignissim tristique.

Action button

Using a new H2 creates a new section

Background colour automatically alternates between white and off-white.

  • Illustrated list

    Combines a small image area, H3 heading, rich text block which can contain paragraphs and lists, and action links.

  • Illustrated list

    Combines a small image area, H3 heading, rich text block which can contain paragraphs and lists, and action links.

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

Navigation cards

Grant cards