Billboard

A full-width block of text with backgrounds that can be used to break up the layout for a call-to-action, to route users toward another topic, or call attention to an important message. For the heading, use short words and up to 3 lines of text at desktop size.

Use Cases:

Use the Billboard component to:

  • Break up a page layout for an important call-to-action
  • Route users toward another topic
  • Call attention to an important message.

Guidelines:

For the heading, use short words and up to 3 lines of text when viewing at desktop size, to avoid awkward text wraps or imbalanced columns.

Avoid:

Since the Billboard adds a lot of visual weight to whatever’s within it, avoid using purely for decoration. Make sure the content and/or link you put in it are worthy of the attention it grants them, as users might overlook your surrounding content if it’s not balanced with other visually heavy components on the page.

Variants with dark backgrounds are best used at the bottom of the page, so users don’t think they’ve reached the footer at the end of the page.


Component Viewer

Preview various component colors, widths, and alignments.

Heading for a Billboard

A full-width block of text with backgrounds that can be used to break up the layout for a call-to-action, to route users toward another topic, or call attention to an important message. For the heading, use short words and up to 3 lines of text at desktop size.

Heading for a Billboard

A full-width block of text with backgrounds that can be used to break up the layout for a call-to-action, to route users toward another topic, or call attention to an important message. For the heading, use short words and up to 3 lines of text at desktop size.

Heading for a Billboard

A full-width block of text with backgrounds that can be used to break up the layout for a call-to-action, to route users toward another topic, or call attention to an important message. For the heading, use short words and up to 3 lines of text at desktop size.