Skip to content

Commit

Permalink
Docs--in-page-banner (carbon-design-system#1713)
Browse files Browse the repository at this point in the history
* update page content to reflect in page banner

* update mdx name json and yaml

* fix(description): to in page banner

* Fix page refclinks

* fix(resource-link): to in page banner

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

---------

Co-authored-by: ariellalgilmore <[email protected]>
Co-authored-by: Rich Kummer <[email protected]>
Co-authored-by: kennylam <[email protected]>
  • Loading branch information
4 people committed Dec 8, 2023
1 parent ae337d1 commit e94693b
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 58 deletions.
36 changes: 18 additions & 18 deletions src/data/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/data/nav-items.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
38 changes: 0 additions & 38 deletions src/pages/components/content-group-banner.mdx

This file was deleted.

45 changes: 45 additions & 0 deletions src/pages/components/in-page-banner.mdx
Original file line number Diff line number Diff line change
@@ -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" />

0 comments on commit e94693b

Please sign in to comment.