Category Card | AWT Component Hub

Category Card Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Use Cases: Used within a page to link specific articles; colors can denote specific categories or products.
Dependencies
- ⚠ Requires a Category Card data item for rendering within the cards container or within an AWT – Category Card Slider
- Optional CTA items can be added to the Banner
- No special mobile behavior: cards stack by viewport; typically 1 card per row on mobile portrait and up to 4 cards per row on desktop (screen resolution dependent).
- Maximum layout: 4 cards per row in a container; site can display up to 12 cards total (3 rows of 4).
- Visual treatment: a gradient effect is applied to the card image

Types: Default, Open Close Description
Gradient: Defines, if selected, which gradient effect will be applied to the Category Card
Images: Image (required)
Title and Description: Title and Description (required)
Open Close Description Text: Defines hyperlink texts(optional)
Remove Triangle:: Defines, if Triangle exists in Image then remove the triangle(optional)
Title and Description Font size: Title and Description font sizes can be adjusted in the the Content Editor

Category Card - Example

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

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.

Placing on a Page

In Experience Editor, press Add a new component and choose or select an existing Cards Container on the page.
Choose the awt-cards-container placeholder and click Add here.
In the Select a Rendering window, choose CategoryCard, tick Open the Properties dialog box immediately, and press Select.
In Select the Associated Content, choose the required Category item under the Category Cards folder and confirm.
To add another CategoryCard, press Add a new component and repeat the previous two steps.
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).
A gradient effect is applied to the image.

Theming and Variants

Theme color applies to: gradient, title, underline image.
Available colors: yellow, red, orange, purple, teal, dark-blue, mid-blue, light-blue, green.
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

Category cards themselves do not have primary links; add up to four CTA renderings below each card.
Associate each CTA with its data source item (follow AWT Banner steps 11–13).
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

Requires Category Card data source items in the content tree.

Open Close Description : Expand Collapse button with Subcategory and Image.
Default : Title and description on the Top, CTAs on the bottom

Category Card - Example

Click here

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

Try this

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

Call us

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

This is SubCategory

Expand

Collapse

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

This is SubCategory

Expand

Collapse

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

Category Card - Example

This is SubCategory

Expand

Collapse

Category cards represent taxonomy entries that group related content (pages, components, media) for navigation, filtering, and personalization

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.