Product lists for descriptive-based pages

Working with Product Lists

The following component variations are available for rendering a Product List:

• ContentTileV2List - stacked
• ContentTileV2 - a carousel - use if you have <= 4 content items
• ContentListStack  or ContentListStackWithBlueBlock - the variation with BlueBlock displays the text on a blue background
• ContentListStackWithBlueCarousel - this component variation will display the products in a carousel list
• ContentListStackWithButtonLInks - this product list variation will stack the 'Apply Now' and 'Tell me more' links. It will also display an eForm in a modal if the 'Apply Now' CTA links to an eform 
• Content List By Category -  this component is designed for use on a Home or Section listing page. It provides customers with a couple of product categories eg Bank or Borrow or Save etc, and then per category, a list of relevant product landing pages eg Personal Bank Accounts / Business Bank Accounts or actual products (if the product name is self explanatory) eg Foreign Exchange. There are 2 variations of this component. Ensure you add the Content List by Category  component on a region with grey background. The Content List By Category With Blue background will display a blue background behind part of the component.
  • There is no limit to the number of Categories, although we recommend not including too many. Test how it renders on desktop and mobile
  • There is no limit to the number of products/teasers/articles displayed within a category. The card size will adjust if there are only one or 2 items per category; If there are >3 items, carousel controls will be displayed
  • The Component Heading is populated from the Component.Appearance.Title
  • The Category name is populated from the SBG Content List.Title, the Category Introduction is populated from the SBG Content List.Summary and the products/articles/teasers are populated from the SBG Content List.Related Content. Please ensure you replace the Related Content with your own or clone the related content as well as first clone the SBG Content List
  • The Icon is populated uinder the Related Link for each SBG Content List (category) - use an svg image that is saved in this folder assets/icons/ 
  • Note: a video media item can be populated for the SBG Teaser and will be displayed and play in situ, if captured. You should add an image for the video media item. The video image uses the same image sizes as the Teaser ie Desktop Client = landscape_sw; Tablet = landscape_sw and Mobile =landscape_sw
• ProductCSOffering Comparative View 
  • This component displays a SBG CS Product Information content items, positioning them side by side to comparing:
    • Product name
    • Description
    • Each custom attribute (feature)
    • Comparison features under 'What you get' 
    • CTAs - "Apply Now" and "Tell me more"
  • The following 2 fields are not displayed in any of the other product lists. They must be populated if you want to display them in this component: 
    • Description - allows you to display an introductory paragraph or text that is geared to position the differences between the products in your list (normally the Introduction is displayed in the product lists  
    • Comparison Features - allows you to summarise and position a list of features in a bulleted list (you may need to use this field, in place o custom features)  
  • There are a number of Presentation Properties that allow you to exclude some content from being displayed, as well as specify whether you want a 3 or 2 column layout:
    •  feature1Display; feature2Display; feature3Display; feature4Display - default is set to "Y". If you don't want to display any of the custom attributes, then set the relevant value to "N"
    • comparisonFeatures - default is "Y"; change this to "N" if you dont' want to display it
    • desktopStacking - default is set to display 3 products per row; set to "2" if you want to display 2 products per row
  • CTAs - links with a LinkClass = Apply or LinkClass = ProductDetails are displayed in this component    
  • Refer examples at end of this page to see how the component can be configured and displayed 

Content that can be included in all of these components (except for ProductCSOfferingComparativeView):

• Products 
  • SBG CS Product Information
  • SBG Product
• Teasers 
  • to be used if you need diffferent wording to what is displayed on the Product detail page OR
  • if you need to link to a Channel page eg Bank Accounts landing page OR
  • if you need to link to an external page
  • NOTE: If you use a Teaser you don't need to capture the description. This may be useful for a Section landing page. Have alook at how it's used on the CIB Investment Banking (IB) page  vs how it's used on the one of the IB section landing pages eg Advisory  
• Articles

 The page below shows the various components and how they render depending on the number of content items