{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"banner","__idx":0},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["banner"]}]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display announcement banners at the top of your documentation pages."," ","Banners are sticky notification bars that appear at the top of pages to communicate important announcements, updates, or information to your users."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Banners support Markdown content, can be configured to appear on specific pages using glob patterns, and can be made dismissible so users can hide them."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"options","__idx":1},"children":["Options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure banners as an array of banner objects in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file or in page front matter."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Update ejected banner"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you ejected the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["navbar"]}," component before version ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0.128.0"]},", ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components/eject-components-in-reunite#update-ejected-component"},"children":["update it"]}," to have the component's full functionality."]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["content"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["REQUIRED."]}," ","The banner content text."," ","Supports Markdown syntax for formatting, links, tags, and emphasis."," ","Partials and variables are not supported."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["This is **a great announcement.** [Button](https://redocly.com)"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["dismissible"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configure whether users can dismiss the banner."," ","When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", a close button appears on the banner."," ","Dismissed banners are stored in browser's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localStorage"]}," and won't appear again for that user."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["target"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Glob pattern that determines which pages display the banner."," ","Uses glob pattern matching to target specific pages or sections."," ","If not specified, matches all pages."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When configuring banners in front matter, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target"]}," option is not needed."," ","Front matter banners automatically target the page where they're configured."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pattern examples:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blog/**"]}," - matches all pages under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blog/"]}," path"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["docs/api/**"]}," - matches all pages under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["docs/api/"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["**"]}," - matches all pages (catch-all)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getting-started.md"]}," - matches a specific page"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Matching rules:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["more specific patterns take priority over less specific ones"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["exact matches take priority over wildcard patterns"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["when multiple banners match a page, only the most specific one is displayed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["patterns are case-insensitive and normalized for matching"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["front matter banners take priority over global config banners"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The visual style tone of the banner."," ","Controls the color scheme of the banner."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Available colors:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["info"]}," - blue background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["success"]}," - green background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["warning"]}," - yellow background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}," - red background"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["info"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["rbac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Map of teams to permission levels that determines who can see the banner."," ","Controls the visibility of the banner based on the user's team membership."," ","If specified, only users belonging to teams with at least ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["read"]}," access will see the banner."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/access/rbac"},"children":["RBAC configuration"]}," for details."]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["startAt"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ISO 8601 timestamp (UTC) for when the banner starts displaying."," ","The banner is hidden before this time."," ","If omitted, the banner displays immediately until ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["endAt"]}," (or indefinitely if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["endAt"]}," is also omitted)."," ","Banner visibility is evaluated client-side based on the user's clock and re-checked while the page is open."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["2026-03-15T00:00:00Z"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["endAt"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ISO 8601 timestamp (UTC) for when the banner stops displaying."," ","The banner is hidden once the current time reaches this value."," ","If omitted, the banner displays indefinitely from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startAt"]}," (or immediately if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startAt"]}," isn't defined)."," ","Banner visibility is evaluated client-side based on the user's clock and re-checked while the page is open."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["2026-04-01T23:59:59Z"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":2},"children":["Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add banners to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"banner:\n  - content: This is **a great announcement.** [Button](https://redocly.com)\n    dismissible: true\n    target: blog/**\n  - content: Important update for all users\n    target: '**'\n    color: warning\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":3},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure multiple banners for different sections:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"banner:\n  - content: Check out our **new blog posts** this week!\n    dismissible: true\n    target: blog/**\n  - content: API documentation has been updated\n    target: api/**\n  - content: Site maintenance scheduled for this weekend\n    dismissible: true\n    target: '**'\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"role-based-visibility","__idx":4},"children":["Role-based visibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Control banner visibility based on team membership."," ","In the following example, the banner is only visible to unauthenticated visitors (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["anonymous"]}," team)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"banner:\n  - content: \"🔒 Log in to see all content!\"\n    color: warning\n    rbac:\n      anonymous: read\n      authenticated: none\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"time-based-visibility","__idx":5},"children":["Time-based visibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Schedule banners to appear and disappear automatically by setting ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startAt"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["endAt"]},"."," ","Use UTC timestamps; visibility is evaluated client-side by comparing those absolute UTC boundaries to the browser's current time."," ","Clock accuracy affects when the banner appears — the configured values are never reinterpreted in the local timezone."," ","Both fields are optional: omit ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["endAt"]}," to display the banner indefinitely from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startAt"]},", or omit ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["startAt"]}," to display it immediately until ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["endAt"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"banner:\n  - content: \"🎉 Spring Sale: 20% off through April 1st!\"\n    target: \"**\"\n    startAt: \"2026-03-15T00:00:00Z\"\n    endAt: \"2026-04-01T23:59:59Z\"\n    dismissible: true\n  - content: Scheduled maintenance March 20, 2-4 PM EST\n    target: \"**\"\n    startAt: \"2026-03-20T19:00:00Z\"\n    endAt: \"2026-03-20T21:00:00Z\"\n    color: warning\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure a banner in the front matter of a specific page:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","data-title":"example.md","header":{"title":"example.md","controls":{"copy":{}}},"source":"---\nbanner:\n  - content: Introducing the miracle of documentation\n---\n\n# Example page\n\nThis is an example page.\n\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":6},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation"},"children":["Build navigation"]}]}," - Overview of navigation components and patterns"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/navbar"},"children":["Navbar configuration"]}]}," - Configure the top navigation bar"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/footer"},"children":["Footer configuration"]}]}," - Configure the footer section"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-styles"},"children":["Customize styles"]}]}," - Customize banner appearance with CSS"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config"},"children":["Configuration options"]}]}," - Explore other project configuration options"]}]}]},"frontmatter":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"],"description":"Display announcement banners at the top of your documentation pages.","banner":[{"content":"This is how a banner displays on project pages.","dismissible":false}],"keywords":{"includes":["banner","announcement"]}},"tagList":["admonition","configOptionRequirements","table"],"title":"banner","lastModified":"2026-10-01T23:00:57.000Z"}