Watch or read through our tutorials to understand key techniques and concepts.

## Getting Started

### What is a Carousel?

In simple terms, a carousel is a type of container that displays a sequence of items, which can be interacted with by clicking or swiping—much like a deck of cards or an old-fashioned slide projector – ie a “carousel”. Carousels are an extremely common UI pattern and it’s likely you’ve come across various instances of them across the web. Many websites make use of carousels— from news publishers and streaming platforms to e-commerce sites, recipe blogs and cloud-based tools.

<Container caption="Some examples of carousels from across the web">
 <InlineImage
 width={878}
 height={583}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_1.png"
 />
</Container>
 

### When Should I Use a Carousel?

Carousels are often a great choice for presenting individual cards or a collection of content in a format that is familiar to many users. Because they are interactive, carousels encourage discovery by permitting users to toggle the visibility of items in the sequence. The ability to navigate between previous and next items builds anticipation and gives users a sense of control.

In addition, using a carousel in your design can be an economical use of visual ‘real-estate’, as carousels typically don’t occupy much vertical space, but may display a continuous row of items, such as a series of articles. In contrast, a grid or photo gallery might occupy multiple rows or the whole page. This makes carousels convenient for use in scenarios in which free space is limited, such as on mobile screens.

### When Should I Avoid Using a Carousel?

In the browser, carousels can present challenges for users who rely on screen-readers or other assistive technology. Because carousels are inherently meant to hide or show individual items based on user-feedback, there’s a chance some content will be obscured from view, either visually or programmatically. This might result in important or essential information becoming hard to read or otherwise inaccessible to some screen-readers and users with visual impairments.

The WPDS Carousel is designed with modern accessibility best-practices in mind. The component supports reduced-motion and keyboard-enabled navigation and has been built to interoperate with screen reading technology. However, performance and functionality in these areas might be impacted when using rich media in your carousel (such as embedded audio or video). Ultimately it’s important to work closely with your engineering team to ensure that implementation of the carousel meets functional UX requirements and accessibility standards for your use-case.

Now that we’ve had a chance to understand Carousels as a UI pattern, let’s learn how to use the WPDS Carousel component in your Figma designs.

### But First – Component Docs!

Before delving further into this guide, we highly recommend taking the time to read our component documentation for WPDS Carousel, if you haven’t already done so. As a starting point, the Carousel component doc provides plenty of useful information regarding the component’s key technical features and functionality, including considerations for web-accessibility.

---

## Configuring the Carousel

### Figma’s Component Properties

WPDS Carousel takes advantage of **component properties**, a native feature in Figma. With component properties or ‘props’, we can build components that are flexible enough to configure according to your needs, while preserving reusability. A further benefit of this approach is that we can establish a direct relationship between the **design** component that lives in Figma and the **coded** component that lives in the browser, because they share the same properties. (Learn more about “connected components” in our [Zeplin resource guide](/resources/guides/zeplin-guide)).

### Adding an Instance of the Carousel to your Figma Design

Like all of the components in our UI Kit Library, the Carousel component can be placed into your Figma file by dragging an instance of it from the **“Assets”** panel into your document.

<Container>
 <InlineImage
 width={900}
 height={600}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_2.gif"
 />
</Container>
 

### Renaming the Carousel

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.

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
 width={350}
 height={292}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_3.gif"
 />
</Container>
 

### 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.

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)

<Container>
 <InlineImage
 width={350}
 height={350}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_4.gif"
 />
</Container>
 

### 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).

<Container>
 <InlineImage
 width={930}
 height={478}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_5.gif"
 />
</Container>
 

### 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.

<Container>
 <InlineImage
 width={278}
 height={317}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_6.png"
 />
</Container>
 

---

## Working with Carousel Content

### Selecting a content type

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.

<Container>
 <InlineImage
 width={300}
 height={743}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_7.gif"
 />
</Container>
 

### 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.

<Container>
 <InlineImage
 width={840}
 height={551}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_8.gif"
 />
</Container>
 

### 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`.

<Container caption="The “Story card” (content organism) features several component properties.">
 <InlineImage
 width={298}
 height={620}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_9.gif"
 />
</Container>
 

---

## Advanced Customization

### Understanding Component Nesting in Figma

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.

To begin customizing your instance of `⬦Carousel`, **click the dropdown menu** next to `🄵 controls` and select **“Custom”**.

<Container>
 <InlineImage
 width={310}
 height={337}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_10.png"
 />
</Container>
 

### Creating Your Own Button Controls

In order to swap the placeholder element with your own custom button — you’ll first have to create a custom button! Your button will then be used as a replacement for the placeholder (shown below).

<Container caption="Placeholder for the “next” button shown in pink">
 <InlineImage
 width={688}
 height={480}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_11.png"
 />
</Container>
 

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
 width={358}
 height={280}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_12.png"
 />
</Container>
 

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.

<Container>
 <InlineImage
 width={242}
 height={546}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_13.gif"
 />
</Container>
 

<Container caption="Carousel with custom “next” button applied.">
 <InlineImage
 width={688}
 height={480}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_14.png"
 />
</Container>
 

### 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?

Employing the same approach described above, we can replace the default “content” slots in the Carousel, with our own custom content by swapping instances.

<Container>
 <InlineImage
 width={688}
 height={396}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_15.png"
 />
</Container>
 

Just as before, you’ll design your own content card in Figma, create a component from it, and place it into a frame. Name the frame something easy to remember such as “Custom Content” (shown below).

<Container caption="Custom content cards like this one can be swapped into the Carousel.">
 <InlineImage
 width={388}
 height={468}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_16.png"
 />
</Container>
 

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!

<Container caption="Choosing your custom content card from the instance panel">
 <InlineImage
 width={240}
 height={546}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_17.gif"
 />
</Container>
 

<Container caption="Carousel with custom buttons and and custom content applied">
 <InlineImage
 width={688}
 height={402}
 maxWidth="100%"
 src="/img/resources/tutorials/carousel/figure_18.gif"
 />
</Container>

WPDS Carousel is robust enough to support a variety of use-cases. In this guide, we’ll show you how to implement the component in your designs and get the most out of its many features. You’ll also learn how to configure the Carousel to enable custom elements such as your own button controls or custom content.

How to use the WPDS Carousel component in your Figma design

## Video tutorial

<YoutubeEmbed videoid="UDJFrp1ox8o" />

In this tutorial, you will learn just how quickly you can audit content for color, sizing, keyboard and screen reader accessibility.

How to do a 5-minute accessibility audit

## Video tutorial

<YoutubeEmbed videoid="wYCuVCa5uek" />

In this tutorial, we will learn just how our theme tokens work and interact with our greater color palette. You will understand why you would use a theme token over just using the same color token. Theme tokens are powerful and will help define how we abstract intention from color in the future as we grow.

How to use theme tokens

## Video tutorial

<YoutubeEmbed videoid="ocTg0ZLvE3o" />

---

## Written steps

### Before starting

Slots are not an actual componet you will find in our coded design system but rather a figma only component that's only purpose is to be swapped out for a pattern, or local component you are designing. When you see a slot either by how its labeled or its name in the layer of a component you can be sure it is a signal for you to replace it with your own local component.

### When to use

Slots are used to avoid having to detaching a component to access nesting content inside of it. For example a tooltip or accordion can hold a lot of different type of content. Rather than the figma component accounting for ever possible variation it is better to just have slot. This then allows for infinite possiblities without having to detach at all.

### The steps

1. First be sure that the component either has a slot by name or you have asked if it is okay to replace.
2. Create your local pattern either using our library of components or just our foundaitons like our typography tokens. This could be anything a headline with a blurb or a image with a headline.
3. Be sure to frame the entire pattern and name it appropriately.
4. Add an auto layout to the frame and convert it to a local component.
5. Select the slot in the component and replace it with the local component.
6. Done!

### Common pitfalls

Sometimes things do not look right when you replace the slot if this is the case check the following:

- Does you component have a auto-layout and is it position correctly.
- Check the nested version of your component and be sure the it is sized appropriately either fill-container or hug-contents.

Slots is a new concept that you will find in our figma ui-kit. It empowers you to nest and build out paterns with our components without detaching. Follow along on this tutorial where you will learn all about slots.

Tutorials

How to use the WPDS Carousel component in your Figma design

How to do a 5-minute accessibility audit

How to use theme tokens

How to use slots