Docs--in-page-banner

src/data/components.json

@@ -675,24 +675,6 @@
         "notAvailable": false
       }
     },
-    "Content group banner": {
-      "url": "/components/content-group-banner",
-      "designLink": "https://ibm.box.com/s/tqp7c0wm99ha0b7jrm0sqhq3whwdjv84",
-      "description": "Content group banner is designed as a subtle callout, intended for tangential information or announcements that are supplementary to the page's main focus.",
-      "storybook": {
-        "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-group-banner--default",
-        "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-group-banner--default"
-      },
-      "webcomponents": {
-        "stable": true,
-        "experimental": false,
-        "new": false,
-        "updated": false,
-        "deprecated": false,
-        "underConstruction": false,
-        "notAvailable": false
-      }
-    },
     "Content group cards": {
       "url": "/components/content-group-cards",
       "designLink": "https://ibm.box.com/s/5sfef66ow9ruw47qye5snhnxey0ioi6t",
@@ -869,6 +851,24 @@
         "notAvailable": false
       }
     },
+    "In page banner": {
+      "url": "/components/in-page-banner",
+      "designLink": "https://ibm.box.com/s/tqp7c0wm99ha0b7jrm0sqhq3whwdjv84",
+      "description": "In page banner is designed as a subtle callout, intended for tangential information or announcements that are supplementary to the page's main focus.",
+      "storybook": {
+        "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-in-page-banner--default",
+        "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-in-page-banner--default"
+      },
+      "webcomponents": {
+        "stable": true,
+        "experimental": false,
+        "new": false,
+        "updated": false,
+        "deprecated": false,
+        "underConstruction": false,
+        "notAvailable": false
+      }
+    },
     "Layout": {
       "url": "/components/layout",
       "designLink": false,

src/data/nav-items.yaml

@@ -78,8 +78,6 @@
       path: /components/carousel
     - title: Content group
       path: /components/content-group
-    - title: Content group banner
-      path: /components/content-group-banner
     - title: Content item
       path: /components/content-item
     - title: Content item row
@@ -104,6 +102,8 @@
       path: /components/horizontal-rule
     - title: Images
       path: /components/images
+    - title: In page banner
+      path: /components/in-page-banner
     - title: Language selector
       path: /components/language-selector
     - title: Lead space

src/pages/components/in-page-banner.mdx

@@ -0,0 +1,45 @@
+---
+title: In page banner
+description: In page banner is designed as a subtle callout, intended for tangential information or announcements that are supplementary to the page's primary focus.
+---
+
+import ComponentDescription from 'components/ComponentDescription';
+import ComponentFooter from 'components/ComponentFooter';
+import ResourceLinks from 'components/ResourceLinks';
+
+<ComponentDescription name="In page banner" type="layout" />
+
+<AnchorLinks>
+
+<AnchorLink>Overview</AnchorLink>
+<AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>Resources</AnchorLink>
+<AnchorLink>Content guidance</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
+## Overview
+
+In page banner supports a headline and two optional CTAs. It is typically utilized for succinct informational callout content such as special features or promotions. This component is intended for supplementary content within the body of a webpage and it should not be placed above the [lead space](https://www.ibm.com/standards/carbon/components/leadspace). For global announcements utilize the [global banner component](https://www.ibm.com/standards/carbon/components/global-banner)
+
+![Image of in page banner banner with two CTAs](../../images/component/content-group-banner/default.jpg)
+
+## Modifiers
+
+### Color schemes
+
+In page banner has additional color schemes to enable more flexibility in how in page banner appears on the page. These include the default `regular` color scheme, as well as `layer`, `purple` , and `cyan`.
+
+<ResourceLinks name="In page banner" type="layout" />
+
+## Content guidance
+
+| Element                                                                | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                 |
+| ---------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ----------------------------------------------------- |
+| Heading                                                                | Text         | Yes      | 1         | 75 / 100                                    |                                                       |
+| [Link list](https://www.ibm.com/standards/carbon/components/link-list) | Component    | Yes      | 1         | 20 / 32                                     | Min 1 CTA, max 2 CTAs, jump link type is not allowed. |
+
+For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content/#character-count-standards).
+
+<ComponentFooter name="In page banner" type="layout" />