Featured carousels
Stay organized with collections
Save and categorize content based on your preferences.
Featured carousels showcase a selection of content relevant to the user.
Resources
Highlights
- 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.
Variants
There are two different ways of integrating featured carousels:
- Immersive
- Card
Content block
Anatomy
- Overline text
- Title
- Description
- Button
Specs
Anatomy
- Background
- Active element
- Inactive elements
- Total elements
Specs
Immersive
Anatomy
- Image background
- Cinematic scrim
- Poster
- Background color
- Content block
- Pagination
- Content grid
Specs
Card
Anatomy
- Image background
- Cinematic scrim
- Poster
- Card background
- Content block
- Pagination
- Content grid
Specs
Usage
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.
check_circle
Do
Keep images clean, visually appealing, and relevant to the content block.
cancel
Don't
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.
check_circle
Do
Use a scrim to improve readability and content digestion.
cancel
Don't
Make sure the background doesn't affect readability and visibility
of the rest of the content on the screen.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-06-27 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-06-27 UTC."],[],[],null,["# Featured carousels showcase a selection of content relevant to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]
