Pattern library

Enter the password to view this page.

Pattern library

Styles

Type

X-large heading

Medium heading

Small heading

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

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

Colour

Palette

  • Navy

    #001529

  • Grey 1

    #334454

  • Grey 2

    #596774

  • Grey 3

    #939ea8

  • Grey 4

    #c9ced3

  • Grey 5

    #f4f5f6

  • White

    #ffffff

  • Purple 1

    #271ca2

  • Purple 2

    #4133dc

  • Purple 3

    #b9b2ff

  • Purple 4

    #e7e5ff

  • Green 1

    #00998f

  • Green 2

    #30f2e6

  • Green 3

    #ccfffc

  • Red

    #cc2929

  • Pink

    #fff2f2

Spacing

Spacing tokens for mobile and desktop
Token Mobile Desktop
section-padding-top48px64px
section-padding-bottom64px80px
reading-width592px696px
max-width1280px1280px
margins16px32px
gutters16px32px
Spacer 000
Spacer 14px4px
Spacer 28px8px
Spacer 312px16px
Spacer 416px24px
Spacer 524px32px
Spacer 632px40px
Spacer 740px48px
Spacer 848px56px
Spacer 956px64px
Spacer 1064px80px
Link heading-s default Link heading-m default, wrapping onto a second line Link regular-sm default Link body-xs default Link error default

Components

Accordion

Accordion

Accordions make content easier to digest by letting users reveal more detailed information only if they need it. They can contain paragraphs and lists.

Accordion

Accordions make content easier to digest by letting users reveal more detailed information only if they need it. They can contain paragraphs and lists.

Action link Can be external link (external) Source name e.g. Mind Or download a file Format Size Length

Back link

Go back

Card / Standard

Card / Knowledge base

Chart

Chart title: should describe the trend

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

  • TV34%
  • Film33%
  • Animation and VFX24%
  • Sales, distribution, marketing and policy24%
  • Post-production23%
  • Cinema, exhibitions and film festivals19%

Made with Flourish • Create a chart

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

Definition tooltip

Definition tooltips allow for a brief definition of a term.

Description list

Description list
Used to organise data into pairs of terms and descriptions/definitions
Second term
Second description
Third term
Third description

Document downloads

Document download

Format Size Length

Use when more context is needed for files the user needs to download such as a template or worksheet.

Document download

Format Size Length

If a cover image is not supplied the thumbnail will fall back to a default icon.

Highlight

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

The last element does not have margin-bottom.

Image / Body

A film crew gathered around a laptop on a studio set
Image caption is optional and used to convey additional information that is either not present or tangentially related to the picture. Image: Optional attribution
Image caption is optional and used to convey additional information that is either not present or tangentially related to the picture. Image: Optional attribution

List / Unordered

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

List / Pictogram

  • Pictogram list

    Each item in a pictogram list is illustrated with a supporting pictogram.

  • Pictogram list

    List items can be preceded by a bold heading.

  • The text of each list item can be strong for emphasis and contain links.

List / Tick

  • Ticked lists can be used to reinforce a series of positive items, like a set of ‘dos and don’ts’.

  • The text of each list item can be strong for emphasis and contain links.

  • Here’s another ticked list item.

List / Ordered

  1. Numbered lists can be used instead of bulleted lists when the order of the items is relevant.
  2. The text of each list item can be strong for emphasis and contain links.
  3. Here’s another numbered list item.

List / Page contents

Pagination

Blockquote

“Blockquotes are unique content quoted from another source. Opening and closing quotation marks are generated automatically.”

Quote attribution

Stats

  • £8.8m

    large statistic

  • 0.123%

    large statistic

  • 888,888

    large statistic

Table / Basic

Basic table

Column A Column B
Cell A1 Cell B1
Cell A2 Cell B2
Cell A3 Cell B3

Table / Responsive

Responsive table

Column A Column B Column C
Cell A1 Cell B1 Cell C1
Cell A2 Cell B2 Cell C2
Cell A3 Cell B3 Cell C3

Tags

Tag default

Tag default

Video

Transcript

Transcript text is shown here when the disclosure is opened.

Full-width

CTA / Full-width

Full-widthcalltoaction

An eye-catching block used to persuade users to perform an action. Ideally should only be used once per page to make the desired action clear to users.

Action

Full-widthcalltoaction

Descriptive paragraph is optional, with the choice of either photo or lens flare background.

Action

Button / CTA

CTA button default CTA button default

Header

Hero / Listing

Listing

Standfirst is a short, plain-text sentence used to summarise the content, connect the headline to the main text and hook the reader

Hero / Landing

Landingpage

Introductory paragraph is optional, with the choice of either photo or video background.

Call to action

Hero / Knowledge base

Knowledge Base page

Standfirst is a short, plain-text sentence used to summarise the content, connect the headline to the main text and hook the reader

Partner logos

Display a grid of logos, with optional introductory paragraph and call to action.

Call to action
  • IWC Media, part of Banijay
  • BFI
  • Mind
  • Blast Films
  • Leopard Pictures
  • Offspring Films
  • Raw
  • Wall to Wall
  • STV

Related knowledge

See all

  • Knowledge base entry

    Clickable cards give users a brief summary of content with a link to more detail

    • First tag
    • Second tag

  • Knowledge base entry

    Clickable cards give users a brief summary of content with a link to more detail

    • First tag
    • Second tag

Testimonial

Testimonial with a full-width quote lorem ipsum dolor sit amet, consectetur adipiscing elit egestas luctus lectus

Source, description lorem ipsum

Forms

Buttons

Question / Checkbox input

Checkbox input

Let users select one or more options from a list.

Question / Checkbox small input

Checkbox input

Let users select one or more options from a list.

Error summary

Question / File upload

File uploadLet users select and upload a file.

No file chosen

Legend

Legend small

Hint text gives users help in context, like how to answer a question or how their data will be used.

Text input label

Hint text gives users help in context, like how to answer a question or how their data will be used.

Question / Radio input / Binary

Inline radio input

If there are only two options they can be displayed side by side.

Question / Radio input / Stacked

Radio input

Let users select only one option from a list. If one of the options is distinct from the others it can help users by separating them with the word ‘or’.

or

Search

Question / Text input

Explain what went wrong and how to fix it

Question / Textarea

You have 123 characters remaining

Question / Date input

Date input

Let users enter a date.

Question / Conditional text input

Action plan

Hero / Action plan builder

Go back

Step 1 of 11

Action plan / Completed actions

X out of Y actions completed

Action plan / Copy URL

URL copied to clipboard

Action plan / Error message

List / Hint text

  • hint text unordered list item
  • hint text unordered list item
  • hint text unordered list item

Action plan / Sharing

Share and download your plan

Use this link to return to your plan at any time, or download your action plan as a PDF.

URL copied to clipboard

Download your action planPDF | XXX KB