Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Billboard

Billboards are defined by their 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. We use billboards to bring our core action to a user’s attention. They 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.

= molecule('billboard-new', variant: ['inverse'], content: { icon: "shared/svg_icons/subject_categories/science_engineering_and_maths_courses" }) do
  %h1.a-heading
    Science, Engineering & Maths Courses
  %div
    Whether you want to brush up on basic science and numeracy skills or master
    advanced topics like robotics and forensics, our online maths, engineering
    and science courses will help. Broaden your mind and build your STEM
    knowledge with top universities.

Elements

The content of a billboard is somewhat flexible, though it should include a heading and some supporting text.

Optionally a billboard can include a logo or an icon, and a call to action below the supporting copy. The call to action should contain a maximum of two buttons.

= molecule('billboard-new', variant: ['inverse']) do
  %h1.a-heading
    Guardian Masterclasses and FutureLearn
  %div
    Guardian Masterclasses allow you to develop your personal and professional
    skills with expert support across a range of disciplines, from writing and
    journalism to data visualisation. In partnership with FutureLearn, Guardian
    Masterclasses presents specially-curated courses led by some of the most
    experienced and accomplished figures in their respective fields.

Variants

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.

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.

See live example

The molecules .o-billboard and .m-dual-billboard are now depriciated and we are in the process of swapping out existing instances of the old molecules with the new version. Note, the live example above still uses the old .o-billboard molecule.