Docs--Callout-with-media-v2 (carbon-design-system#1672)

* Docs--Content-group--remove-persistent-line (carbon-design-system#1629) * Removed "persistent" line * Remove line * Add space * chore(footer): updating to today's date * Minor updates to overview (carbon-design-system#1623) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Docs - Lead space search minor language edit (carbon-design-system#1631) * Removed "persistent" line * Changed to 8 and 4 columns --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * content block cards update (carbon-design-system#1634) * content block cards update * Update src/pages/components/content-block-cards.mdx --------- Co-authored-by: Rich Kummer <[email protected]> * chore(footer): updating to today's date * Content block simple update (carbon-design-system#1635) * content block cards update * update content block simple descriptions * Update content-block-cards.mdx --------- Co-authored-by: Rich Kummer <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * update expressive styling (carbon-design-system#1646) * update expressive styling overview page * update styling strategies tab * update type pairing tab * capitilize info * chore(footer): updating to today's date * [Patterns – Cards] minor content updates + fixed card link (carbon-design-system#1642) * minor content updates + fixed card link * resource cards * Featured content to Feature card heading * colon * Update src/pages/patterns/cards.mdx Co-authored-by: Olivia Flory <[email protected]> --------- Co-authored-by: Olivia Flory <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(footer): updating to today's date * docs(typo) (carbon-design-system#1638) Co-authored-by: Olivia Flory <[email protected]> * Lower case component names (carbon-design-system#1654) * chore(footer): updating to today's date * update style model page (carbon-design-system#1652) * update style model page * update high density model section * fix rogue masthead --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(footer): updating to today's date * Sketch kit support updates (carbon-design-system#1650) * sketch kit page add notification * update get started designing * index page fix install design kit * remove 'new' from sketch page --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * [Patterns – Lead space] Minor edits, remove button alignment info (carbon-design-system#1643) * intro to overview, remove button alignment info * Notification re button group * Lower case component names * Update src/pages/patterns/lead-space.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/patterns/lead-space.mdx Co-authored-by: Olivia Flory <[email protected]> * Remove link to card --------- Co-authored-by: Olivia Flory <[email protected]> * updates to help overview page (carbon-design-system#1659) * updates to help overview page * change header --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * update faq page (carbon-design-system#1660) * chore(footer): updating to today's date * remove gif, slight reorganization (carbon-design-system#1663) * fix style model typo (carbon-design-system#1665) * chore(footer): updating to today's date * Update homepage cwc release (carbon-design-system#1666) * update homepage c2c release add cwc final release image * update homepage * chore(footer): updating to today's date * update lts image (carbon-design-system#1667) * update lts image update lts image to reflect new date * update lts to november * update date to november --------- Co-authored-by: Rich Kummer <[email protected]> * chore(footer): updating to today's date * content changes no img yet * move resource links * Added image and changed path * fix anchor link order --------- Co-authored-by: ibmdotcom-bot <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Olivia Flory <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]>
oliviaflory · Dec 8, 2023 · 124977a · 124977a
1 parent 7eaea8d
commit 124977a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/images/component/callout-with-media/cwm-overview.png b/src/images/component/callout-with-media/cwm-overview.png
diff --git a/src/images/pattern/callout-with-media/callout-with-media.jpg b/src/images/pattern/callout-with-media/callout-with-media.jpg
diff --git a/src/pages/components/callout-with-media.mdx b/src/pages/components/callout-with-media.mdx
@@ -11,24 +11,32 @@ import ResourceLinks from 'components/ResourceLinks';
 
 <AnchorLinks>
 
-<AnchorLink>Resources</AnchorLink>
 <AnchorLink>Overview</AnchorLink>
+<AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>Resources</AnchorLink>
 <AnchorLink>Content guidance</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
 
-<ResourceLinks name="Callout with media" type="layout" />
-
 ## Overview
 
-Callout with media uses high contrast colors to create a delightful pause in the narrative and create a powerful
-impression on the user. It includes a heading, supporting message, and media in the form of an image or video.
+Callout with media enables a high impact moment in page content that highlights a key piece of media (either video or image) and supporting information. Callout with media is best used as a break from content to vary the overall structure of the page and draw attention.
 
-![Default](../../images/pattern/callout-with-media/callout-with-media.jpg)
+![Default](../../images/component/callout-with-media/cwm-overview.png)
 
 <br />
 
+## Modifiers
+
+### Color schemes
+
+Callout with media has additional color schemes to enable more flexibility in how callout content appears on the page. These include the default `regular` color scheme, as well as `inverse`, `layer`, `purple` , and `cyan`.
+
+Note that the color scheme effects the background, heading, body copy, and caption. Choose the color scheme wisely to best represent the media in the callout.
+
+<ResourceLinks name="Callout with media" type="layout" />
+
 ## Content guidance
 
 | Element | Content type                                                                                                                       | Required | Instances | Character limit <br/>(English / translated) | Notes |