Featured carousels

Featured carousels showcase a selection of content relevant to the user.



Type Link Status
Design Design source (Figma) Available
Implementation Jetpack Compose Available


  • Use featured carousels to highlight specific content.
  • Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.
  • Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.
  • Featured carousels are visually appealing to help engage the user, and create an immersive experience.
  • The content displayed can be personalized based on the user's viewing history, preferences, or current trends.


There are two different ways of integrating featured carousels:

  1. Immersive
  2. Card

Immersive Featured Carousel

Card Featured Carousel

Content block


Content Block Anatomy

  1. Overline text
  2. Title
  3. Description
  4. Button


Content Block Immersive Spec




  1. Background
  2. Active element
  3. Inactive elements
  4. Total elements


Pagination Spec



Immersive Anatomy

Immersive Background Anatomy

  1. Image background
    1. Cinematic scrim
    2. Poster
    3. Background color
  2. Content block
  3. Pagination
  4. Content grid


Immersive Specs



Card Featured Carousel Anatomy

Card Featured Carousel Image Anatomy

  1. Image background
    1. Cinematic scrim
    2. Poster
    3. Card background
  2. Content block
  3. Pagination
  4. Content grid


Card Featured Carousel Spec


Use featured carousels to showcase and promote a curated selection of content in an engaging, visually appealing, and simple to navigate format.

Images in backgrounds

Images in backgrounds play a crucial role in enhancing user engagement in a streaming app featured carousel.

High quality imagery

Use high-resolution images that are visually appealing and relevant to the content of the focused card.

Keep images clean, visually appealing, and relevant to the content block.
Avoid using images with text in the background.

Obvious visual hierarchy

Ensure that the background does not distract from the focused card's content by using a scrim over the image; this helps the user maintain focus on the card's title, description, and call-to-action button.

Use a scrim to improve readability and content digestion.
Make sure the background doesn't affect readability and visibility of the rest of the content on the screen.