Guidelines for AEM Components
Explore a library of components designed to create impactful marketing pages.
Comparison Component
The Comparison Component displays up to four products side by side, assisting prospects in discerning the differences in key features and capabilities, thereby facilitating a well-informed decision.
Settings
Configuration
Display Layout
- Select the number of products to compare.
- We can select below layout for the products.
- Two Products
- Three Products
- Four Products
Columns
- Can be set to Two, Three or Four columns.
Component Title
- Title displayed at the top of the component.
- Should talk to what this table is comparing.
- It is required Field.
Product Content
- Product Name
- Enter the product name headline.
- Can be large or small.
- Product Link
- Select or enter an optional link for the Product Name.
- Name of the product can be clickable.
- Pricing
- Optional product pricing text.
- Can display or not.
- Product Image
- Add an image for the product.
- Image dimension is 150px x 114px.
- Image Alt Text
- Alternate text for image.
Features & CTA
Features Grid
- Feature
- Enter feature title text.
- Product 1 Feature
- Enter feature description for product 1.
- Prefix with ^ for grey text.
- Product 2 Feature
- Enter feature description for product 2.
- Prefix with ^ for grey text.
- Product 3 Feature
- Enter feature description for product 3.
- Prefix with ^ for grey text.
- Product 4 Feature
- Enter feature description for product 4.
- Prefix with ^ for grey text.
We can make the product features as symbolic representation as per below settings:-
- A grey X mark can be displayed by putting "No" in feature fields of respective products.
- A green check mark can be displayed by putting "Yes" in feature fields of respective products.
Call To Action
- Button Can be added to the product.
- Link
- Select or enter a link for the cta.
- Link Text
- Enter the text for the CTA button - required when link field is populated.
- Link Title
- Enter the text for the cta link title attribute - required when link field is populated.
UI & Styles
Yes or No styles
- New Tab ?
- CTA link will open in new tab if it is checked.
- Disable Lazy Loading of Image ?
- Used to suppress lazy load of the images.
- No Gap ?
- Removes the bottom margin separating modules.
- Top Gap ?
- Adds a gap to the top of the component separating it from the top of the page or a prior component.
- Display Title ?
- Check this option to display the Title.
- Bold Option ?
- Makes the Product Name text larger and bold.
- Pink Headline ?
- Render the headline in pink.
- Gray Background ?
- Solid gray background on feature descriptions and attributes only.
- Enable to add background to the chart.
Meta
- Element ID
- Add an ID to the component to allow #hash linking.
- It is optional field.
Notes:-
- We require minimum two products to compare.
- Maximum we can add four products
Examples
Example 1 - Without Component Title
Example 2 - With Component Title (Display Title and Pink Headline Enabled)
Component Title
Example 3 - Two Products With Pricing
SendPro C Lite
$XX.XX
Up to 200 pieces
Up to 100
Up to 70 lbs*
Up to 50 letters/min
Semi-Automatic
No
Example 4 - Bold Option Disabled For Product Names
SendPro C Lite
$XX.XX
Up to 200 pieces
Up to 100
Up to 70 lbs*
Up to 50 letters/min
Semi-Automatic
No
Example 5 - Without Product Image
Compare:
SendPro C Lite
$XX.xx
Up to 200 pieces
Up to 100
Up to 70 lbs*
Up to 50 letters/min
Semi-Automatic
No
Example 6 - Product Features Text in Grey
Component Title
Product 1
$XX.XX
Product 1 Feature
Product 1 Feature
Product 1 Feature
Product 2
$XX.XX
Product 2 Feature
Product 2 Feature
Product 2 Feature
Product 3
$XX.XX
Product 3 Feature
Product 3 Feature
Product 3 Feature
Product 4
$XX.XX
Product 4 Feature
Product 4 Feature
Product 4 Feature
Example 7 - With Field Names
Component Title
Product 1
$XX.XX
Product 1 Feature
Product 1 Feature
Product 1 Feature
Product 1 Feature
Yes
No
Product 2
$XX.XX
Product 2 Feature
Product 2 Feature
Product 2 Feature
Product 2 Feature
Yes
No
Product 3
$XX.XX
Product 3 Feature
Product 3 Feature
Product 3 Feature
Product 3 Feature
Yes
No
Product 4
$XX.XX
Product 4 Feature
Product 4 Feature
Product 4 Feature
Product 4 Feature
Yes
No
Example 8 - CTA Added To The Products
Up to 200 pieces
Up to 100
Up to 70 lbs*
Up to 50 letters/min
Semi-Automatic
No
Up to 500 pieces
Up to 200
Up to 70 lbs*
Up to 120 letters/min
Automatic
No
500 pieces or more
Up to 200
Up to 150 lbs.
Up to 310 letters/min
Automatic
Yes
Up to 200 pieces
Up to 100
Up to 70 lbs*
Up to 50 letters/min
Semi-Automatic
No
Up to 500 pieces
Up to 200
Up to 70 lbs*
Up to 120 letters/min
Automatic
No
500 pieces or more
Up to 200
Up to 150 lbs.
Up to 310 letters/min
Automatic
Yes