- Use Cases: Used to visually highlight articles, categories, or features across the site. Common placements include homepage content blocks, disease area overviews, and promotional sections. Cards are clickable and link to deeper content.
- Dependencies
- None required. The Illustration Card is fully self-contained and does not rely on child items or external data sources.
- Layout Types: Vertical and Horizontal
- Background Color: Defines the background color of the card.
- Images: Illustration card image being the focal point of the container (required)
- Title and Description Font size: Title and Description font sizes can be adjusted in the the Content Editor
Creating an Illustration Card
- In Content Editor, create a "Illustration Card Folder" under the "_datasources" of your page
- Create a new Illustration Card item from the Illustration Card template.
- Fill in the required fields
- Title
- Background Color
- ⚠ Important: The colors for the background are located in the following folder: /sitecore/content/AWTSites/GlobalRepository/Shared/Global/Component Settings/Illustration Card Settings Folder/Color Setting Folder. If a color does not exist (or the language version is not added), please add it to this path.
- Fill in optional fields: Description, Illustration Card Image, etc
- In Experience Editor, insert the Illustration Card rendering into the awt-container (or any component which can be placed inside the awt-container) or awt-cards-container placeholder.
- The awt-cards-container is only used if 5 card components are needed (awt-container only allows having 4 components in a single row)
- Associate the Illustration Card item as the data source.
- Normal: (Default state) Image on top, title and description below
- Horizontal: Image on the left, title and description on the left.
- There are currently no known issues with this component