Billboard

Purpose

We use billboards to bring core messaging and/or an action to a user’s attention.

Example

Billboard Mobile
Billboard Tablet
Billboard Desktop

Live Examples

Course category page

Description

Billboards are defined by use of a full-width background image, a headline and supporting copy, with equal padding above and below the content. Where necessary we can use a background colour instead of an image, if relevant to a client brand. Billboards are particularly useful for landing pages where we want to introduce campaign or marketing messaging.

The billboard can be placed anywhere on the page but is commonly used at the top.

View Billboard example on category pages

Elements

The content of a billboard is somewhat flexible, though it should include:

Optionally a billboard can include:

The call to action should contain a maximum of two buttons.

Variants

Legibility

For readability over background images, an --overlay modifier is available to provide a darker overlay. For dark backgrounds, you can use the --inverse modifier to change text colour to white.

Legibilitybillboard320
Billboard Legibility Tablet
Billboard Legibility Laptop

Alignment

By default Billboard content is left aligned. If the design calls for it, you can also use a centered variant of the billboard with --centered modifier. You should use whichever fits the background imagery you are using best.

Studyukbillboard320
Studyukbillboard680
Studyukbillboard1280
Live example

Split

The split billboard advertises 2 bits of content, side-by-side with the FutureLearn steps in between them. You can use this variant with the `--split` modifier.

View the split billboard on the homepage

Billboard Split Mobile
Billboard Split Tablet
Billboard Split Desktop

Added by: