From 055ef5e8019e7e16985cd569a1feabe40d90e643 Mon Sep 17 00:00:00 2001
From: Rebecca Tamachiro <62246989+RebeccaTamachiro@users.noreply.github.com>
Date: Mon, 14 Oct 2024 12:03:17 +0100
Subject: [PATCH] [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
---
 .../content-types/get-started.mdx             | 22 +++++++++---------
 .../docs/style-guide/frontmatter/banner.mdx   | 23 +++++++++++++++++++
 .../docs/style-guide/frontmatter/index.mdx    |  8 -------
 3 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 src/content/docs/style-guide/frontmatter/banner.mdx

diff --git a/src/content/docs/style-guide/documentation-content-strategy/content-types/get-started.mdx b/src/content/docs/style-guide/documentation-content-strategy/content-types/get-started.mdx
index e50a1b78bb6fd51..c29533a3a8cf747 100644
--- a/src/content/docs/style-guide/documentation-content-strategy/content-types/get-started.mdx
+++ b/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.
 ```
 
diff --git a/src/content/docs/style-guide/frontmatter/banner.mdx b/src/content/docs/style-guide/frontmatter/banner.mdx
new file mode 100644
index 000000000000000..d2d8399f4614940
--- /dev/null
+++ b/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.
+---
+```
\ No newline at end of file
diff --git a/src/content/docs/style-guide/frontmatter/index.mdx b/src/content/docs/style-guide/frontmatter/index.mdx
index 5841b7a844333e6..36d0b00b1f7831d 100644
--- a/src/content/docs/style-guide/frontmatter/index.mdx
+++ b/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>
 ---
 ```