- 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 contain CTAs and link to deeper content.
- Dependencies
- None required. The Text Description 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
The Text Description Card presents structured content with a clear hierarchy: title, subtitle, descriptive text, and a prominent CTA to drive action. It can be used standalone or embedded within other components to add concise context and guidance. Ideal for highlighting features, summarizing updates, or framing supporting information alongside visuals.
The Text Description Card presents structured content with a clear hierarchy: title, subtitle, descriptive text, and a prominent CTA to drive action. It can be used standalone or embedded within other components to add concise context and guidance. Ideal for highlighting features, summarizing updates, or framing supporting information alongside visuals.
Creating a Text Description Card
- In Content Editor, create a "Text Description Card Folder" under the "_datasources" of your page
- Create a new Text Description Card item from the Text Description 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