- Use Cases: Where and why this component should be used
- Dashboards and landing sections: Grouping KPI or feature cards into a grid.
- Listing content: Displaying a set of articles, products, events, people, or case studies as cards.
- Teaser/Promo rows: A row of promotional cards with CTAs.
- Resource libraries: Filters + cards to browse downloads or media.
- Dependencies
- ⚠ Requires at least Card child item to render this component
- Optional Card items can be added to the Cards Container
- Max Cards Count :
- Contains "Max cards count" field to restrict cards count in one raw
- Contains "Max cards count" number of placeholders to add compatible card renderings
- Has default value of the "Max cards count" field set to 4
- Images: Background Image (required), Badge Image (optional)
-
Cards Container With Background Image: A layout component that groups related pieces of information within a visually distinct container that features a background image.
-
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.
Category Card - Example
Category cards are versatile tools used in different fields, primarily as digital payment cards locked to specific spending types
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 are versatile tools used in different fields, primarily as digital payment cards locked to specific spending types
Category Card - Example
Category cards represent taxonomy entries that group related content
- In Content Editor, create a "Card Container Folder" under the "_datasources" of your page
- Create a new Illustration Card Container folder
- Under Illustration Card Container folder create Illustration card item from the Illustration Card template.
- Fill in the required fields of Illustration Card
- Create a new Category Card Folder
- Under Category Card Folder create Category card item from the Category Card template.
- Fill in the required fields of Category Card
- In Experience Editor, insert the Card Container rendering into the awt-body placeholder.
- Associate the respective card container item as the data source.
Adding Cards
- In Experience Editor, select the awt-cards-container placeholder inside the cards container
- Add a Illustration card rendering.
- Associate the Illustration card data source item.
- Repeat for multiple Illustration cards if needed
- In the same way Add other types of cards
- Cards Container: Container for different card types
- Cards Container With Image: Container with Background Image
-
Cards Container With Background Image: A layout component that groups related pieces of information within a visually distinct container that features a background image.
-
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.
- Limited to awt-bottom placeholder.
- page must contain not more than 3 Card Containers.