-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs--in-page-banner (carbon-design-system#1713)
* 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
1 parent
ae337d1
commit e94693b
Showing
4 changed files
with
65 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" /> |