C06. Icon / Content tiles
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Dec 2021 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective:
The Icon / Content Tile component provides a visual way of display information to a site user.
Use case:
This component can be used on the following templates:
Home page
Landing page
Content page
Business rules
BR-# | Business rules |
|---|---|
BR-1 | The content within this component can either be manually entered or dynamically populated. |
BR-2 | For dynamic content, the title is pulled from the 'Title' field in the 'Title and Tags' tab within page properties of the page. |
BR-3 | For dynamic content, the description is pulled from the 'Description' field in the 'Title and Tags' tab within page properties of the pages. |
BR-4 | The component should support different variations as per the designs (e.g. with or without image, or with or without an icon). |
BR-5 | The content tiles should have a consistent format (see design for the variations of the format possible). |
BR-6 | The whole tile is clickable. |
Design
We’ve designed variations of the content tile below that could be used throughout the website.
Desktop | Mobile |
|---|---|
 Example content tile with icon  Example content tile without an icon/image
|
CMS Elements
The following provides AEM authoring guidelines.
Tab 1: Dynamic Content | ||||
# | Field | Description | Details | Mandatory field? |
|---|---|---|---|---|
1 | Parent page path | Link to the AEM page where the dynamic content should be pulled from. If selected, the Title, Description and Image will be pulled from this page and displayed within the tile. | Page selector | No |
2 | Link text | The text to appear on the link label | Text | No |
3 | Opening (Link target) | Dropdown menu for whether the page opens in the same tab or a new tab | Dropdown:(New Tab or Same tab)
| No |
Tab 2: Manual content | ||||
4 | Title | Text describing the content within the tile | Text | No |
5 | Subtitle | A label to appear below the title | Text | No |
6 | Category | A label to appear above the title | Text | No |
7 | Description | Description of the tile's purpose | Rich Text | No |
8 | Text alignment | Whether the text should be aligned Left, Right or Centre | Drop-down:
| No |
9 | Content date | A date to appear within the tile | Date selector | No |
10 | CTA Type | Whether the CTA should display as a Link or a Button style | Dropdown | No |
11 | CTA Text | The text to appear on the CTA (e.g. Learn more) | Text | No |
12 | CTA URL | The destination path for the CTA | URL / AEM Selector | No |
13 | Has icon on link/button | Checkbox | No | |
Tab 3: Additional features | ||||
14 | Image | Image relevant to the displayed information or product to appear on the tile | Image | No |
15 | Image alt text | The alt text to appear for the selected image | Text | No |
16 | Background colour | Optional background colour to appear on the tile, in hexadecimal format | Text (HEX) | No |