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.