Left Image Vertical Listing
Component Overview
The Left Image Vertical Listing is an extremely versatile component. This component allows you to add listings with images, rich text, and links, all in one component. If you have a lot of listings, it's the most efficient way to display them - it only takes up one place in the Page Details instead of many.
This component also contains multiple variants, including a version that alternates the listing photos to the left and right to add visual interest, and a version that follows the 'new look' component layout.
Do not use the 'new look' variant with the classic look components, only use the 'new look' variant with other 'new look' components.
Component Location
Left Image Vertical Listing → Left Image Vertical Listing
Component Overview
Supported Templates & Placeholders
| Template | Placeholder |
|---|---|
| Article Detail Page |
/maincontent/full-width
/maincontent/rail-page-content
|
| Detail Page |
/maincontent/detail-page-nav/detail-page-content
|
| Experience Landing with Nav |
/maincontent/full-width
|
| Experience Landing Page |
/maincontent/full-width
|
| Experience Interior Nav |
/maincontent/interior-nav-content
|
| Experience Right Rail Page |
/maincontent/rail-page-content
|
Recommended Image Size
400x600 at 72 DPI
Character Limits
Parent Component
Listing Heading: Unlimited
Listing Description: Unlimited
Sub-Component
Vertical Listing Title: Unlimited
Description: Unlimited
Button Link 1: Unlimited
Button Link 2: Unlimited
How to Use
After adding the parent component (Left Image Vertical Listing), you'll add Vertical Listing Items by right-clicking on the parent component and selecting 'Insert'. You'll add the information in the sub-component, and it will automatically be added to the parent Left Image Vertical Listing.
Important Note: The order in which the Vertical Listing Items appear in the Content Editor is the order in which they will appear on the frontend of the website.
Page Details and Notes
After adding the components in the Page Details, you'll see a number of options in the Left Image Vertical Listing Parameters menu for variants.
Alternate Sides: Alternates which side the image is placed on. The first Vertical Listing Item will have its photo on the left, and the following will have its photo on the right. This will alternate as many times as necessary.
Description Character Limit: Allows you to place a maximum character limit on the Description field. Once the character limit is reached. the component will automatically truncate the Description field with elispes (...).
Highlighted Variant: This is the variant of the component that follows the 'new look' component layout. Do not use this variant with 'classic look' components, only use it with other 'new look' components.
List Size: This is the MOST IMPORTANT field. Setting this field correctly is critical in making sure that all of your information is displayed. Setting this value to more items than you have sub-components is fine and generally acceptable. However, the component will only display as many Vertical Listing Items as is specified in this field.
Component Example
To see how the component will display on different types of screens, select the button below.
Component Type
Main Body
ABOUT THE COMPONENT
- Component Type: Main Body
- Rich Text: Yes, in sub-components only
- Images: Yes, 1
- Video: No
- Buttons: Yes, up to 2
- Links: No
- Icons: No
Special Notes
Highlighted Variant only supports one link, classic look supports 2 UTA Buttons.