From 1694a17579c7ac7aa6a58e05dec55968bddccd52 Mon Sep 17 00:00:00 2001
From: Brian Alfaro <brianalfaro@thoughttolife.com>
Date: Wed, 25 Oct 2023 17:01:29 -0400
Subject: [PATCH] docs: SRED-550:Carousel Guide Fix (#525)

https://arcpublishing.atlassian.net/browse/SRED-550
---
 .../docs/resources/tutorials/carousel.mdx     | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/build.washingtonpost.com/docs/resources/tutorials/carousel.mdx b/build.washingtonpost.com/docs/resources/tutorials/carousel.mdx
index 94e4d815e..24080b730 100644
--- a/build.washingtonpost.com/docs/resources/tutorials/carousel.mdx
+++ b/build.washingtonpost.com/docs/resources/tutorials/carousel.mdx
@@ -64,11 +64,11 @@ Like all of the components in our UI Kit Library, the Carousel component can be
 
 ### Renaming the Carousel
 
-In the design panel, you will see the **\`⬦Carousel\`** component instance, along with its configurable properties — including **\`🄵 title\`**.
+In the design panel, you will see the `⬦Carousel` component instance, along with its configurable properties — including `🄵 title`.
 
-By default, the text displayed at the top of the component is _“Carousel title”_. To alter this text, simply **click the input** field next to **\`🄵 title\`** to edit its value and press enter when done.
+By default, the text displayed at the top of the component is _“Carousel title”_. To alter this text, simply **click the input** field next to `🄵 title` to edit its value and press enter when done.
 
-If you’d prefer not to display a title for your Carousel, you may **toggle the switch** next to **\`🄵 show title?\`**. (Toggling this setting hides the text layer in your **\`⬦Carousel\`** instance.)
+If you’d prefer not to display a title for your Carousel, you may **toggle the switch** next to `🄵 show title?`. (Toggling this setting hides the text layer in your `⬦Carousel` instance.)
 
 <Container>
   <InlineImage
@@ -82,9 +82,9 @@ If you’d prefer not to display a title for your Carousel, you may **toggle the
 
 ### Positioning the controls
 
-**\`⬦Carousel\`** ships with several options for placement of controls (e.g. prev / next buttons) and pagination — including the option to hide controls entirely.
+`⬦Carousel` ships with several options for placement of controls (e.g. prev / next buttons) and pagination — including the option to hide controls entirely.
 
-To change where controls are placed, **click the dropdown menu** next to **\`🄵 controls\`** and select the option that’s most suitable to your design.
+To change where controls are placed, **click the dropdown menu** next to `🄵 controls` and select the option that’s most suitable to your design.
 
 The available options are meant to serve a variety of use-cases and visual preferences while maintaining functionality and predictability for our website visitors. (For more guidance on custom controls, see section 4: Advanced Customization)
 
@@ -100,7 +100,7 @@ The available options are meant to serve a variety of use-cases and visual prefe
 
 ### Resizing the Carousel
 
-To adjust the **width**, simply **drag the right or left edge** of the **\`⬦Carousel\`** frame. You may choose to make your instance of the component narrower or wider, depending on the space available in your design. Increasing the width will reveal additional content items nested within the component. (For more guidance on this, see section 3: Working with Content).
+To adjust the **width**, simply **drag the right or left edge** of the `⬦Carousel` frame. You may choose to make your instance of the component narrower or wider, depending on the space available in your design. Increasing the width will reveal additional content items nested within the component. (For more guidance on this, see section 3: Working with Content).
 
 <Container>
   <InlineImage
@@ -114,7 +114,7 @@ To adjust the **width**, simply **drag the right or left edge** of the **\`⬦Ca
 
 ### Dynamic height with Auto layout
 
-Using Figma’s Auto Layout feature, we can set the vertical dimension of **\`⬦Carousel\`** to “hug” its contents. This means the **height** of the carousel is determined by the content nested within it, and will adapt its height accordingly.
+Using Figma’s Auto Layout feature, we can set the vertical dimension of `⬦Carousel` to “hug” its contents. This means the **height** of the carousel is determined by the content nested within it, and will adapt its height accordingly.
 
 <Container>
   <InlineImage
@@ -134,7 +134,7 @@ Using Figma’s Auto Layout feature, we can set the vertical dimension of **\`
 
 As previously discussed – Carousels can contain many kinds of content. The WPDS Carousel component ships with a number of content types to pick from when populating your instance (more on “content organisms” below).
 
-To choose from the available options, **click the dropdown** menu next to **\`🄵 content type\`** and make a selection. Your selection will be applied to all nested **“Slot”** elements within your **\`⬦Carousel\`** instance.
+To choose from the available options, **click the dropdown** menu next to `🄵 content type` and make a selection. Your selection will be applied to all nested **“Slot”** elements within your `⬦Carousel` instance.
 
 <Container>
   <InlineImage
@@ -148,7 +148,7 @@ To choose from the available options, **click the dropdown** menu next to **\`
 
 ### Content Organisms
 
-The options found under **\`🄵 content type\`** represent specific content patterns commonly found across washingtonpost.com. These “organisms” are in fact, unique sub-components that are maintained in their own dedicated Figma library (ie **Pattern Kit**), which lives outside of the core WPDS UI kit.
+The options found under `🄵 content type` represent specific content patterns commonly found across washingtonpost.com. These “organisms” are in fact, unique sub-components that are maintained in their own dedicated Figma library (ie **Pattern Kit**), which lives outside of the core WPDS UI kit.
 
 <Container>
   <InlineImage
@@ -162,7 +162,7 @@ The options found under **\`🄵 content type\`** represent specific content pat
 
 ### Editing Content via Component Properties
 
-Each content type features its own, unique component properties. Once you’ve selected a content type, its properties can be modified directly in the Design panel. Any edits you make will be applied to your instance of **\`⬦Carousel\`**.
+Each content type features its own, unique component properties. Once you’ve selected a content type, its properties can be modified directly in the Design panel. Any edits you make will be applied to your instance of `⬦Carousel`.
 
 <Container caption="The “Story card” (content organism) features several component properties.">
   <InlineImage
@@ -182,9 +182,9 @@ Each content type features its own, unique component properties. Once you’ve s
 
 One of the most powerful aspects of designing with components in Figma is the ability to override _nested components_. (Read more about this technique in our guide, “[How to Use Slots](/resources/tutorials/how-to-use-slots)”).
 
-Combined with Figma’s “swap instance” feature,**\`⬦Carousel\`** offers several methods to customize the appearance of key UI elements such as content and controls. Out of the box, the component ships with placeholder elements (eg, “slots”) that can be replaced with your own, unique designs— all without ever detaching the component from our component library.
+Combined with Figma’s “swap instance” feature,`⬦Carousel` offers several methods to customize the appearance of key UI elements such as content and controls. Out of the box, the component ships with placeholder elements (eg, “slots”) that can be replaced with your own, unique designs— all without ever detaching the component from our component library.
 
-To begin customizing your instance of **\`⬦Carousel\`**, **click the dropdown menu** next to **\`🄵 controls\`** and select **“Custom”**.
+To begin customizing your instance of `⬦Carousel`, **click the dropdown menu** next to `🄵 controls` and select **“Custom”**.
 
 <Container>
   <InlineImage
@@ -210,7 +210,7 @@ In order to swap the placeholder element with your own custom button — you’l
 </Container>
 <br />
 
-Once you’ve designed the buttons you intend to use in your **\`⬦Carousel\`** instance, create a component of each button — one for _“previous”_ one for _“next”_. Frame your selection and give it a name (such as “Custom Buttons”, shown below). Make note of where this frame lives in your Figma file in case you want to make adjustments later.
+Once you’ve designed the buttons you intend to use in your `⬦Carousel` instance, create a component of each button — one for _“previous”_ one for _“next”_. Frame your selection and give it a name (such as “Custom Buttons”, shown below). Make note of where this frame lives in your Figma file in case you want to make adjustments later.
 
 <Container>
   <InlineImage
@@ -222,9 +222,9 @@ Once you’ve designed the buttons you intend to use in your **\`⬦Carousel\`**
 </Container>
 <br />
 
-Now, in the instance panel, click the dropdown menu next to **\`🄵 prev button\`** or **\`🄵 next button\`**. In the search field, type the name of the frame where your custom buttons are located.
+Now, in the instance panel, click the dropdown menu next to `🄵 prev button` or `🄵 next button`. In the search field, type the name of the frame where your custom buttons are located.
 
-Choose the “previous” or “next” button that corresponds to the button you are swapping. Your selection will be applied to the **\`⬦Carousel\`**. Repeat the process for the other button and your buttons are now customized.
+Choose the “previous” or “next” button that corresponds to the button you are swapping. Your selection will be applied to the `⬦Carousel`. Repeat the process for the other button and your buttons are now customized.
 
 <Container>
   <InlineImage
@@ -248,7 +248,7 @@ Choose the “previous” or “next” button that corresponds to the button yo
 
 ### Using Your Own Content
 
-As we saw earlier, Carousel ships with several common patterns to choose from for **\`🄵 content type\`**. However, what if none of these options are well-suited for your design or use-case?
+As we saw earlier, Carousel ships with several common patterns to choose from for `🄵 content type`. However, what if none of these options are well-suited for your design or use-case?
 
 Employing the same approach described above, we can replace the default “content” slots in the Carousel, with our own custom content by swapping instances.
 
@@ -274,9 +274,9 @@ Just as before, you’ll design your own content card in Figma, create a compone
 </Container>
 <br />
 
-Now let’s look at the instance panel once again and click the dropdown next to **\`🄵 content type\`**.
+Now let’s look at the instance panel once again and click the dropdown next to `🄵 content type`.
 
-This time, rather than selecting from the default options under “Preferred” – we’ll choose “Local components”, find “Custom Content” and select the content card we designed earlier. Your instance of **\`⬦Carousel\`** is now populated with your own custom content!
+This time, rather than selecting from the default options under “Preferred” – we’ll choose “Local components”, find “Custom Content” and select the content card we designed earlier. Your instance of `⬦Carousel` is now populated with your own custom content!
 
 <Container caption="Choosing your custom content card from the instance panel">
   <InlineImage