- Use Cases: Where and why this component should be used (homepage hero, section headers, promotional banners).
- Dependencies
- ⚠ Requires a Text Description Card child item in the content tree for rendering - Banner component does not need Subtitle field value for the Text Description Card data source item
- Optional CTA items can be added to the Banner
- Layout Types: Two Column, Centered, Left Aligned, Horizontal
- Gradient: Defines, if selected, which gradient effect will be applied to the banner
- Images: Background Image (required), Banner Image (optional), device-specific images (desktop, tablet, mobile)
- Apply Banner Image Padding: Defines, if Banner Image needs padding inside the banner
- Title and Description Font size: Title and Description font sizes can be adjusted in the the Content Editor
Banner - Example
Delivering quality and creativity that make a lasting impact.
Creating a Banner
Adding CTAs
- In Content Editor, create a "Banners Folder" under the "_datasources" of your page
- Create a new Banner item from the Banner template.
- Fill in the required fields
- Type (layout of the banner component)
- Background Image
- Fill in optional fields: Gradient, Banner Image, Padding, etc
- Important: Under the Banner item, create a Text Description Card child item
- This is required for the Banner to render correctly on the page
- Populate the Text Description Card fields (title, description...)
- In Experience Editor, insert the Banner rendering into the awt-body placeholder.
- Associate the Banner item as the data source.
Adding CTAs
- In Experience Editor, select the awt-cta placeholder inside the Banner
- Add a CTA rendering.
- Associate the CTA data source item.
- Repeat for multiple CTAs if needed (Important: the max number of CTAs is dictated by the "Max CTA Count" field in the Text Description Card component)
- Centered: Text centered over background image.
- Horizontal: Title and description on the left, CTAs or AWT Container on the right
- Left Aligned: Content aligned to the left, banner image can't be added
- Two Column: Text on the left, image on the right
Banner - Centered
Delivering quality and creativity that make a lasting impact.
Banner - Horizontal
Delivering quality and creativity that make a lasting impact.
Banner - Left Aligned
Delivering quality and creativity that make a lasting impact.
Banner - Two Columns
Delivering quality and creativity that make a lasting impact.
- Mobile designs for some variants are pending
- Gradient options need creation and expansion (currently no available options)
- Variants:
- Variant with image on the left need to be created
- Variant with 2 text columns needs to be created