Category Card Box Variant Highlights content with flexible layouts and optional images/gradients
  • 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.
    • Images: Use optimized, consistently sized images for cards to maintain visual alignment across slides.
  • Layout Type: Default
  • Title: Title of the Category Card
  • Images: Image of the Category Card (required)
  • Description: Defines the Category Card
  • Link: Link to the Detailed Description of the Category Card
Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component
Creating Category Cards
  1. In Content Editor, under the _datasources folder create a Category Card Box Variant folder
  2. Inside _datasources→ Category Card Box Variant, create a Category Card Box Variant
  3. Add Title, Description, Image, Link for each Category Card Box Variant
  4. Repeat the previous step for all required Category Card Box Variant items.

Placing on a Page
  1. In Experience Editor, press Add a new component.
  2. In the Select a Rendering window, choose Category Card Box Variant, tick Open the Properties dialog box immediately, and press Select.
  3. In Select the Associated Content, choose the required Category Card Box Variant item under theCategory Card Box Variant 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.
  
Dependencies
  1. Requires Image in the Category Card Box Variant.
 
  • There is no specific variant for this component
Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component

 Woman on phone hero image

CCBV

A rendering variant for a Card-like component

  • There are currently no known issues with this component
Original Documentation: NA Designs: Figma Link Related Documentation:  Text Description Card