Docs--Callout-with-media-v2 (#1672)

* Docs--Content-group--remove-persistent-line (#1629)

* Removed "persistent" line

* Remove line

* Add space

* chore(footer): updating to today's date

* Minor updates to overview (#1623)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Docs - Lead space search minor language edit (#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 (#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 (#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 (#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 (#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) (#1638)

Co-authored-by: Olivia Flory <[email protected]>

* Lower case component names (#1654)

* chore(footer): updating to today's date

* update style model page (#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 (#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 (#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 (#1659)

* updates to help overview page

* change header

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* update faq page (#1660)

* chore(footer): updating to today's date

* remove gif, slight reorganization (#1663)

* fix style model typo (#1665)

* chore(footer): updating to today's date

* Update homepage cwc release (#1666)

* update homepage c2c release

add cwc final release image

* update homepage

* chore(footer): updating to today's date

* update lts image (#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]>

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 |