We use billboards to present the most important messaging/action to the user. Billboard is our main promotional molecule and therefore should only be used once on a page, at the top.


Billboard Mobile
Billboard Tablet
Billboard Desktop

Live Examples

Course category page


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.

View Billboard example on category pages


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.



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.

Billboard Legibility Tablet
Billboard Legibility Laptop


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.

Live example


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: