diff --git a/src/data/components.json b/src/data/components.json index 69908c76c..22c7cffa8 100644 --- a/src/data/components.json +++ b/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, diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index d59f4ff23..302403bb7 100644 --- a/src/data/nav-items.yaml +++ b/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 diff --git a/src/pages/components/content-group-banner.mdx b/src/pages/components/content-group-banner.mdx deleted file mode 100644 index 312a4ddb0..000000000 --- a/src/pages/components/content-group-banner.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Content group banner -description: Content group 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'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - -Since this component is intended for supplementary content, it is not intended to be used above the [Lead space](https://www.ibm.com/standards/carbon/components/leadspace). Content group banner accommodates a headline and one to two additional CTAs. - -![Image of content group banner default](../../images/component/content-group-banner/default.jpg) - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ----------------------------------------------------- | -| Heading | Text | Yes | 1 | 75 / 100 | | -| [Link list](https://www.ibm.com/standards/carbon/components/link-list) | Component | Yes | 1 | – | 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). - - diff --git a/src/pages/components/in-page-banner.mdx b/src/pages/components/in-page-banner.mdx new file mode 100644 index 000000000..3312c71f5 --- /dev/null +++ b/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'; + + + + + +Overview +Modifiers +Resources +Content guidance +Feedback + + + +## 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`. + + + +## Content guidance + +| Element | Content type | Required | Instances | Character limit
(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). + +