Reel

When it comes to presenting dynamic content, you need a flexible and user-friendly solution. Reels offer a powerful and efficient way to display content such as images, cards, or any other scrollable elements. In this article, we'll delve into the various aspects of Reels and how you can leverage them for dynamic content display in your web projects.

Introduction to Reels

Reels are designed to make it easy to create horizontal scrollable content within a container. They are ideal for showcasing items where users can scroll left or right to explore the full content. Here's how you can use Reels to enhance your content display:

Using Reels

To create a horizontal reel of content in your HTML, follow these steps:

1. Start by applying the .reel class to your HTML element. This class sets up the necessary display properties for horizontal scrolling. It ensures that content overflows on the x-axis, and you can scroll through it.

<div class="reel">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
</div>

2. For images, it's important to knwo they fit within the .reel container. The reel sets the height of all images to 100% and adjusts the width as needed to fit the container.

.reel > img {
  height: 100%;
  flex-basis: auto;
  width: auto;
}

3. To add spacing between the items within the reel, apply one of the .reel-space-* classes. These classes set the --cds-comp-composition-reel-space variable, controlling the spacing between reel items. Choose the class that corresponds to your desired spacing:

Class	Value
.reel-space-3xs	--cds-sys-spacing-3xs
.reel-space-2xs	--cds-sys-spacing-2xs
.reel-space-xs	--cds-sys-spacing-xs
.reel-space-s	--cds-sys-spacing-s
.reel-space-m	--cds-sys-spacing-m
.reel-space-l	--cds-sys-spacing-l
.reel-space-xl	--cds-sys-spacing-xl
.reel-space-2xl	--cds-sys-spacing-2xl
.reel-space-3xl	--cds-sys-spacing-3xl

Here's an example of a reel with small spacing:

<div class="reel reel-space-s">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
</div>

4. In case your reel's content is overflowing due to excessive content, spacing or shadows, you can add the .reel.overflowing class. This class adds padding to the bottom of the .reel container to prevent content from sticking to the edges.

<div class="reel overflowing">
  <!-- Your reel content here -->
</div>

Customizing Reel Colors

Scrollbar track

You can easily customize the scrollbar track colors using the .reel-track-color-{color} classes, which set the --cds-comp-composition-reel-track-color variable. The default is secondary-container.

Choose from a variety of colors to match your design preferences.

Color variants

background, on-background, surface, on-surface, surface-variant, on-surface-variant, surface-tint, inverse-surface, on-inverse-surface, primary, primary-container, inverse-primary, on-primary, on-primary-container, secondary, secondary-container , on-secondary, on-secondary-container, error, on-error, error-container, on-error-container, warn, on-warn, warn-container, on-warn-container, success, on-success, success-container, on-success-container, excellent, on-excellent, excellent-container, on-excellent-container, shadow, stroke, scrim

<div class="reel reel-track-color-primary-container">
  <!-- Your reel content here -->
</div>

Scrollbar thumb

You can easily customize the scrollbar thumb colors using the .reel-thumb-color-{color} classes, which set the --cds-comp-composition-reel-thumb-color variable. The default is secondary.

Choose from a variety of colors to match your design preferences:

Color variants

background, on-background, surface, on-surface, surface-variant, on-surface-variant, surface-tint, inverse-surface, on-inverse-surface, primary, primary-container, inverse-primary, on-primary, on-primary-container, secondary , secondary-container, on-secondary, on-secondary-container, error, on-error, error-container, on-error-container, warn, on-warn, warn-container, on-warn-container, success, on-success, success-container, on-success-container, excellent, on-excellent, excellent-container, on-excellent-container, shadow, stroke, scrim

<div class="reel reel-thumb-color-primary">
  <!-- Your reel content here -->
</div>

This makes it simple to customize the scrollbar thumb color to seamlessly integrate it with your design's color scheme. Of course, here's the updated section for customizing the Reel item widths and heights:

Customizing Reel Item Width and Height

You can easily customize the width and height of Reel items using the .reel-item-w-{size} and .reel-item-h-{size} classes, which set the --cds-comp-composition-reel-item-w and --cds-comp-composition-reel-item-h variables, respectively. Choose from a range of sizes to match your design preferences:

Available Sizes

3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl

<div class="reel reel-item-w-m">
  <!-- Your reel content here -->
</div>

<div class="reel reel-item-h-s">
  <!-- Your reel content here -->
</div>

Practical Use Cases

Reels are incredibly versatile and can be applied to a variety of use cases:

• Creating image galleries where users can scroll through images horizontally.
• Building horizontal card layouts for showcasing content.
• Designing interactive product carousels for e-commerce websites.
• Implementing custom navigation menus that are scrollable.