Skip to content
Telescope

Promotional Banner

Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Features

  • Show an illustration, a message and an action.
  • Choose the variant that matches the importance of your message.
  • Responsive out of the box.

When to use

Banners should be displayed at the top of the screen. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

Examples

Pink

This is the primary default variant.

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Yellow

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Gray

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Bordered

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Purple

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

No image

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

No close button

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

With secondary call to action

Use a secondary (quiet) call to action to prevent the promotional banner from drawing too much attention away from more important actions on a page.

Information:

Use the secondary call to action only with the bordered variant of the promotional banner. Our secondary button is not designed to be used on top of our brand colors.

Meet Subscriptions

Take control over your recurring payments. No more duplicates, no more wondering who pays for what.

Related components

  • Action banner: A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
  • Banner: A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
  • Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.