Docs--Callout-with-media-v2

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 |