Skip to content
Telescope
Components

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 a message and an action.
  • Use a consistent gray surface for promotional messages.
  • 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

Gray

Promotional banners always use the gray surface.

Show code
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
    <PromotionalBanner.CloseButton ariaLabel="Close" />
</PromotionalBanner>

No image

Show code
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
    <PromotionalBanner.CloseButton ariaLabel="Close" />
</PromotionalBanner>

No close button

Show code
<PromotionalBanner>
    <PromotionalBanner.Content>
        <PromotionalBanner.ContentHeading>Meet Subscriptions</PromotionalBanner.ContentHeading>
        <PromotionalBanner.ContentText>
            Take control over your recurring payments. No more duplicates, no more wondering who
            pays for what.
        </PromotionalBanner.ContentText>
    </PromotionalBanner.Content>
    <PromotionalBanner.CTA onClick={() => {}}>Learn how it works</PromotionalBanner.CTA>
</PromotionalBanner>

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.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page