• 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; Subtitle is optional.
  • Parent Component: The Category Card Slider Variant 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.
  • Rendering Parameters: Optional parameters for slides per view, autoplay, loop, and pagination controls; confirm defaults in your solution.
  • Tracking/Analytics: If enabled, card clicks should be tagged for category engagement analytics.

• 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)

Creating Category Cards & Slider

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: Title, Copy, Image, Image Link, Gradient Color, White Mode, Max CTA Count.
6. Repeat the previous step for all required Category items.
7.  Add Category card slider folder and and add item named "Category Card Slider"
8. In the Category Card field , Select category cards to move to right side. The selected category cards will display in Slider Component

Placing on a Page

1. In Experience Editor, press Add a new component.
2. In the Select a Rendering window, choose Category Card Slider Variant, tick Open the Properties dialog box immediately, and press Select.
3. In Select the Associated Content, choose the required Category Card Slide item under the Category Cards 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).
4. A gradient effect is applied to the image.

Theming and Variants

1. Theme color applies to: gradient, title, underline image.
2. Available colors: yellow, red, orange, purple, teal, dark-blue, mid-blue, light-blue, green.
3. Bottom can be swapped for white background version: switches the category/text area to white with padding for use on darker pages; both variants are in the “category bottom” sub-component state menu.

Adding CTAs

1. Category cards themselves do not have primary links; add up to four CTA renderings below each card.
2. Associate each CTA with its data source item (follow AWT Banner steps 11–13).
3. Repeat for multiple CTAs as needed (Important: the max number of CTAs is dictated by the Max CTA Count field on the Category item).

Dependencies

1. Requires Category Card mapping in Category Card field of the Category Card Slider Item.

 

• There is no specific variant for this component

• There are currently no known issues with this component