Cards Container A reusable layout component that arranges multiple Card components
  • Use Cases: A component that arranges multiple “Card” items (each card usually has image, title, summary, link, and optional metadata) into a consistent grid or list
  • Card: A self-contained content block that include a summary of information (like an image, title, and description) that acts as an entry point to more detailed content.

  • Dependencies
    • ⚠ Requires at least Card child item to render this component  
  • ⚠ Accepts up to 5 card components
img

Category Card - Example

Category cards are versatile tools used in different fields, primarily as digital payment cards locked to specific spending types

img

Category Card - Example

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

img

Category Card - Example

Category cards are versatile tools used in different fields, primarily as digital payment cards locked to specific spending types

img

Category Card - Example

Banner Page

Category cards represent taxonomy entries that group related content

img img backpack-hover
Creating a Cards Container
  1. In Content Editor, create a "Card Container Folder" under the "_datasources" of your page
  2. Create a new Illustration Card Container folder
  3. Under Illustration Card Container folder create Illustration card item from the Illustration Card template.
  4. Fill in the required fields of Illustration Card
  5. Create a new Category Card Folder
  6. Under Category Card Folder create Category card item from the Category Card template.
  7. Fill in the required fields of Category Card
  8. In Experience Editor, insert the Card Container rendering into the awt-body placeholder.
  9. Associate the respective card container item as the data source.

Adding Cards
  1. In Experience Editor, select the awt-cards-container placeholder inside the cards container
  2. Add a Illustration card rendering.
  3. Associate the Illustration card  data source item.
  4. Repeat for multiple Illustration cards if needed
  5. In the same way Add other types of cards
  • Cards Container: Container for different card types
  • Cards Container With Image: Container with Background Image
Background Logo
  • Limited to awt-bottom placeholder. 
  • page must contain not more than 3 Card Containers.     
Original Documentation: Confluence Link Designs: Figma Link Related Documentation: Category Card,Illustration Card