Create page with guidance around banners in docs

Author: RebeccaTamachiro

src/content/docs/style-guide/frontmatter/banner.mdx

@@ -0,0 +1,23 @@
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+  content: Do <strong>not</strong> use banners in the <a href="/style-guide/frontmatter/">Frontmatter</a> unless a change will cause customer application to break.
+---
+
+import { Steps, FileTree } from "~/components";
+
+One of the fields you can add to the [Frontmatter](/style-guide/frontmatter/) is `banner`. It displays a prominent section at the top of the page and supports the use of HTML for links and formatting.
+
+Only use it to alert about situations that may cause disruptions to users and take note to remove it when applicable.
+
+## Example
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+  content: Do <strong>not</strong> use banners in the <a href="/style-guide/frontmatter/">Frontmatter</a> unless a change will cause customer application to break.
+---
+```