- Use Cases: Where and why this component should be used
- Homepage and Landing Pages: Showcase top-level categories (e.g., Therapy Areas, Product Lines) to guide users into key sections quickly.
- Section Introductions: Present a scannable overview of sub-categories within a section, improving discoverability and reducing page depth.
- Promotional Groupings: Highlight curated sets of categories during campaigns or seasonal initiatives to drive targeted navigation.
- Related Navigation Blocks: Surface related categories on detail pages to encourage cross-navigation and exploration.
- Dependencies
- ⚠ Requires a Category Card child item in the content tree for rendering - Each Category Card should include Title, Image, and Link, Description.
- Parent Component: The Category Card Slider rendering expects a data source folder containing Category Card child items; the slider will not render without at least one valid child item.
- Images: Use optimized, consistently sized images for cards to maintain visual alignment across slides.
- Type: Default
- Category Cards: Category Cards which are used in slider component (required)
- Title: Title of the Component (optional)
- View All Button Text: View All Button Title (optional)
- Background Color: Color of the Background (optional)
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
Subcategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Creating Category Cards
- In Content Editor, under the Global folder create a Cards Containers folder (skip if it exists).
- Inside Global → Cards Containers, create a Category Cards folder (skip if it exists).
- Within Global → Cards Containers → Category Cards, create a Gradient Colors folder (skip if it exists).
- Inside Gradient Colors, create Color items and set the Color field value to one of: “dark-blue”, “green”, “mid-blue”, “orange”, “purple”, “red”, “teal”, “yellow”. Add all needed background colors.
- Create a Category item under Global → Cards Containers → Category Cards.
- Add CTA child items as needed (up to four) according to AWT Banner content-authoring steps.
- Populate fields: Title, Copy, Image, Image Link, Gradient Color, White Mode, Max CTA Count.
- Repeat the previous step for all required Category items.
Creating Category Card Slider
- In Content Editor, under the specific page _datasources folder add folder named Category Card Slider folder
- Inside _datasources → Category Card Box Slider folder create a Category Card Slide
- Inside Category Card Slide, select respective category Cards from left to Right.
- Repeat the previous step for all required Category cards.
Placing on a Page
- In Experience Editor, press Add a new component.
- In the Select a Rendering window, choose Category Card Box Slider, tick Open the Properties dialog box immediately, and press Select.
- In Select the Associated Content, choose the required Category Card Box Slider item under the Category Card Box Slider folder and confirm.
- Save the page (Ctrl+S).
Use Cases and Behavior
- Used within a page to link to specific articles; colors can denote specific categories or products.
- Cards are mobile-first and responsive: typically 1 per row on mobile, ~2 side-by-side on portrait tablet, and up to 4 per row on desktop.
- Maximum: 4 cards per row on desktop; up to 12 cards total (3 rows of 4).
Dependencies
- Requires At least one Category Card in Category Card Slider Item.
- There is no specific variant for this component
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
Subcategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
Category Card - Example
SubCategory
Category Card slider is a horizontally scrollable carousel that displays cards representing content categories (e.g., Oncology, Respiratory, Cardiology). Each card typically includes a category name, icon or image, and sometimes a short description or badge. Users can swipe or click arrows to browse categories and select one to navigate to filtered content.
- There are currently no known issues with this component