Guidelines for AEM Components
Explore a library of components designed to create impactful marketing pages.
Tiles Module
The versatile Tiles Component enables the expansion of benefits or features, enhancing clarity and comprehension of a product or service.
Settings
Configuration
Headline
- Enter text for the introduction headline.
- It is optional.
Headline Level
- Select the element level for the headline.
- None
- H1
- H2
- H3
- H4
- H5
- H6
Description
- Enter an introduction description.
- It is optional.
Background Gradient
We can select the background gradient from the dropdown list for the items.
- None
- Blue
- Blue to Cyan
- Blue to Green
- Cyan to Pink
- Violet to Orange
- Gray
Tile Styles
Select the style for the tiles.
- Text Only
- Logos
- Dimension of the tile image :- 300 x 160.
- Image format is PNG.
- Icons
- Dimension of the tile image :- 74 x 74.
- Image format is SVG.
Note:-
- If we select the tile style as Logos then the tile item headline and body text will not visible on page only logo will be visible.
Layout
Display Layout
- Select the number of columns for the display layout.
- Three Columns
- Four Columns
- Five Columns (Logos Style Only)
- Six Columns (Logos Style Only)
- Seven Columns (Logos Style Only)
- Eight Columns (Logos Style Only)
Truncation Feature
Show Message
- Text rendered as “show more” link for hidden content if there are many contents on tile module.
- This "show more" text will not visible on desktop view. It will visible on lower resolution devices like mobile,Ipad.
Max Items
- It will help us to show how many items to display when content is truncated.
- It will accept only number.
Footnote
- Note displayed at the bottom of the module across the full width.
Meta
- Add an ID to the component to allow #hash linking.
- It is optional.
Yes or No styles
- 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.
- Centered Headline ?
- Renders the intro headline centered instead of left-justified.
- Light Text ?
- Renders all text as white for legibility when displayed over dark backgrounds.
- Full Width Background ?
- Alters padding to properly render colored backgrounds.
Tile Item Component
Tile Text
- Headline
- Headline displayed for each tile block.
- Headline Level
- User can select the headline level from h1-h6 for headline.
- Headline Body
- Body text of the tile block.
Tile Image
- Add an image to the tile.
- We can add image to the tile block.
- For Icon we can use 74 x 74 dimension and image format is SVG.
- For Logos we can use 300 x 160 dimension and image format is PNG.
- Alt Text
- Alternate text for SEO and accessibility describing the image.
Tile Link
Link
- Select or enter a link for the tile.
- We can open the link on new tab of the browser by enabling the "New Tab " option.
Link Title
- If the HREF is provided, a link title is also required.
Examples
Example 1 - Text Only ( Tile Style)
Product Features
Digital scale
Accurately weigh large flats and envelopes up to 5 pounds with the integrated, digital scale.
Access to PitneyShip™ shipping software
Print USPS shipping labels, track shipments, get cost accounting data and save even more with access to PitneyShip®, our online shipping software.
Rate changes and savings
Get automatic rate change updates and postage savings – 4¢ on every First Class letter and up to 89%* using shipping labels from PitneyShip® shipping software.
Address verification
Reduce costly address correction fees and improve your delivery success rate.
Example 2 - Logos Style ( Tile Style)
This setting allows to showcase logos of clients, partners, or brands. This is an alternative to the Logos Component: https://www.pitneybowes.com/us/template/logos_components.html