[Style guide] Update banner guidance and Get started template (#17504)

* Remove word Step from headings in Get started template

* Create page with guidance around banners in docs

* Remove banner example from index.mdx and text-refine new page

Author: RebeccaTamachiro

src/content/docs/style-guide/documentation-content-strategy/content-types/get-started.mdx

@@ -43,23 +43,23 @@ The purpose of Get started content is to help users go from not using a product
 weight: xx
 pcx_content_type: get-started
 ---
- 
+
 # Get started
- 
+
 Description
- 
+
 ## Before you begin
- 
+
 All the things you need to do before you start configuring your product, both within Cloudflare and outside.
- 
-## Step 1 -- Step description
- 
-## Step 2 -- Steps until you get to activation
- 
+
+## 1. Step description
+
+## 2. Steps until you get to activation
+
 ---
- 
+
 ## Next steps
- 
+
 Point to more complex setup options.
 ```
 

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 disruptive situations 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.
+---
+```

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

@@ -5,10 +5,6 @@ description: |
     For example, a regular page might set title and description fields.
 sidebar:
     order: 3
-banner:
-    content: |
-        <h2>Hello, world!</h2>
-        <a href="/">Homepage</a>
 ---
 
 Frontmatter contains the metadata for a page, such as the `title`. It is written as YAML, between `---`, at the top of the page.
@@ -23,10 +19,6 @@ description: |
     For example, a regular page might set title and description fields.
 sidebar:
     order: 3
-banner:
-    content: |
-        <h2>Hello, world!</h2>
-        <a href="/">Homepage</a>
 ---
 ```