Get Inspired
Docs
Blog
Articles
Handbook
Where to publish your content Components Content types
Add a project Add a doc Add a blog post Schedule a post Add an API Add a collection page Add a collection page Add an image or video Add an author Add a tag Add an iframe Add a Glitch embed Add a YouTube embed Add a landing page Display a banner Create anchor redirects Style guide
Extensions docs Web platform docs
Handbook
Where to publish your content Components Content types
Add a project Add a doc Add a blog post Schedule a post Add an API Add a collection page Add a collection page Add an image or video Add an author Add a tag Add an iframe Add a Glitch embed Add a YouTube embed Add a landing page Display a banner Create anchor redirects Style guide
Extensions docs Web platform docs

Display a banner

Published on

To display a banner across the entire site, add a banner.yml file to the _data directory. The contents of the file should look like this:

type: info
text: Your banner text goes here.
actions:
  - text: Apply
    href: https://google.com
  - text: Dismiss

Banners support either info or warning types. An info banner is blue and a warning banner is red.

The banner supports up to two actions. If an action has an href it will generate a link. If it does not have an href it will generate a button that will always dismiss the banner.

Clicking either action will dismiss the banner and store a cookie on the user's computer so they don't see the banner again.

If you don't have two links, then we suggest the second action always be a dismiss button so users can clear the banner if they find it intrusive.

Published on • Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.