Billboard Layout

When to Use a Billboard Layout

Use a billboard layout to show content overlaid above a decorative background color, photo, or video. The height of the billboard can be configured, as well as the position of the overlay. Choose an overlay background style ("Dark", "Light", or "None") to make sure that content can be easily seen against the selected background. Note that the text color is automatically switched to white for improved legibility when the "Dark" style is selected.

A variety of size and style configurations allow designers to tailor how content is displayed on top of a decorative background in the billboard layout.


Use billboards to add visual interest and richness to pages. Choose backgrounds that complement, but don’t distract from page content.


Don’t use a billboard to show informational images or videos which users need to review. Billboards have fixed heights and background content may be cut off. Overlay content could also obscure part of the background. Use an image or video component instead if the intent is not solely decorative.

Overlay Style


Use the full overlay style to reduce visual clutter when overlay contents cover up most of the background image.


Avoid using a bar overlay style for a group of billboards with varying content sizes. This results in inconsistent height and visual clutter.

Billboard Spacing

Wrap billboards in section layouts to create vertical space between them and other contents below.

Ensuring Sufficient Contrast

Legibility of information displayed within a billboard layout depends on the interplay between the content style, overlay style, and background media. For example, if negative-style rich text (red) is displayed in an overlay with style of "None" (transparent) above a background color of red, then the text would not be readable.

Consider the following guidelines when designing for maximum contrast:

  • Try the various overlay styles to see which one works best. In general, use the "Light" overlay style with lighter backgrounds and the "Dark" style for darker images and videos. Use a transparent overlay style of "None" only when the background content/color is known to provide sufficient contrast with the overlay content.
  • It is generally more difficult to guarantee good legibility for content displayed above a busy, high-contrast image or video.
  • Text color is automatically switched to white for improved legibility when the "Dark" overlay style is selected.

Performance Considerations

Provide images and videos with appropriate resolution and quality for the display size. But also be aware that users with bandwidth constraints may see an empty billboard background before media loads completely–avoid unnecessarily large downloads.

Open in Github

On This Page