Icon Card  An Icon Card typically contains an icon (SVG or image), a title, short text, and optionally a link or CTA.
  • 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
Encodes instructions for
building proteins
A mechanism that measures or
​counts down time intervals
A structured content
item or file (e.g., page, PDF, policy)

Creating IconCard

  1. In Content Editor, create a "Icon Card Folder" under the "_datasources" of your page
  2. Create a new IconCard item from the Icon Card template.
  3. Fill in the required fields
    • Image
  4. Fill in optional fields: Background Color

Creating IconCardContainer

  1. In Experience Editor, insert IconCardContainer rendering into the awt container
  2. In Experience Editor, insert the Icon Card rendering into the IconCardContainer placeholder.
  3. Icon card can be inserted into cards container, or any other relevant awt container in the same way.
  4. 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
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: NA