- Use Cases: Used to To highlight features, benefits, or service pillars with easily scannable visuals.
- Feature highlights: Summarize key capabilities or benefits with visual cues and links to detail pages.
- Service catalog/navigation: Present services or quick actions in a scannable grid to improve wayfinding.
- Resource taxonomy: Categorize documents, videos, FAQs, or topics with recognizable icons for faster discovery.
- Dependencies
- None required. The Icon Card is fully self-contained and does not rely on child items or external data sources.
- Background Color: Defines the background color of the card.
- Images: Icon card image being the focal point of the container (required)
Presentation component to group and render a set of “icon cards.” An Icon Card typically contains an icon (SVG or image), a title, short text, and optionally a link or CTA.
Quickly discovering
relevant data sources
relevant data sources
Encodes instructions for
building proteins
building proteins
A mechanism that measures
or
counts down time intervals
counts down time intervals
A structured content
item or file (e.g., page, PDF, policy)
item or file (e.g., page, PDF, policy)
Creating IconCard
- In Content Editor, create a "Icon Card Folder" under the "_datasources" of your page
- Create a new IconCard item from the Icon Card template.
- Fill in the required fields
- Image
- Fill in optional fields: Background Color
Creating IconCardContainer
- In Experience Editor, insert IconCardContainer rendering into the awt container
- In Experience Editor, insert the Icon Card rendering into the IconCardContainer placeholder.
- Icon card can be inserted into cards container, or any other relevant awt container in the same way.
- Associate the Icon Card item as the data source.
- None : There are no variants for this component.
- There are currently no known issues with this component