Category Card Slider Highlights content with flexible layouts and optional images/gradients with Slider 
  • 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)

 

View All

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

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

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

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

Creating Category Cards

  1. In Content Editor, under the Global folder create a Cards Containers folder (skip if it exists).
  2. Inside Global → Cards Containers, create a Category Cards folder (skip if it exists).
  3. Within Global → Cards Containers → Category Cards, create a Gradient Colors folder (skip if it exists).
  4. 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.
  5. 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: TitleCopyImageImage LinkGradient ColorWhite ModeMax CTA Count.
  6. Repeat the previous step for all required Category items.

Creating Category Card Slider

  1. In Content Editor, under the specific page _datasources folder add folder named Category Card Slider folder
  2. Inside _datasources Category Card Box Slider folder create a Category Card Slide 
  3. Inside Category Card Slide, select respective category Cards from left to Right.
  4. Repeat the previous step for all required Category cards.

Placing on a Page
  1. In Experience Editor, press Add a new component.
  2. In the Select a Rendering window, choose Category Card Box Slider, tick Open the Properties dialog box immediately, and press Select.
  3. In Select the Associated Content, choose the required Category Card Box Slider item under the Category Card Box Slider folder and confirm.
  4. Save the page (Ctrl+S).

Use Cases and Behavior
  1. Used within a page to link to specific articles; colors can denote specific categories or products.
  2. 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.
  3. Maximum: 4 cards per row on desktop; up to 12 cards total (3 rows of 4).
  
Dependencies
  1. Requires At least one Category Card in Category Card Slider Item.
 
  • There is no specific variant for this component
View All

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

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

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

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

  • There are currently no known issues with this component
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: AWT-Container, Cards Container, Category Card