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.
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
View Billboard example on category pages
The content of a billboard is somewhat flexible, though it should include:
- a background image or colour
- a heading (h1)
- supporting text (uno)
Optionally a billboard can include:
- a logo or an icon
- a call to action below the supporting copy
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.
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.
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.