Multi-Column Product Tier Comparison 

Layout Variant: C020B

Content Type: Collection

Expected Use:

A variant of the C020 Multi-Column Comparison component designed when featuring comparison content for different tiers or subscription levels of a single product or software offering. Up to 4 tiers of the same software product can be featured or displayed side-by-side allowing users to easily review which service, product tier or subscription level meets their needs and circumstances.

Similar to the original C020 component, the C020B variant allows authors to highlight product comparison content in a flexible, multi-column layout, but with a focus on illustrating the differences between tiers or subscription levels of the same product or software offering in each column.
 

Building the Component:

The component includes a section heading, optional body description text, and between 2–4 tier columns. The C020B Component can be attached to or be a part of any page. You can add multiple collection that has c020b layout variant in one page.  To setup the C020B, your component should contain the following: 

• Teaser Title - The section heading of your component. 
• Teaser Text - The optional section body copy or header description of your component.  
• Items - The content or featured product displayed on each column. They are used to provide additional text copy in the C020.
• Teaser CTA Label, Teaser Header, Pictures and other Media are not used in this component. 
• CTA Label and Teasable Content. CTAs come from the added Teasers on the Items Section of C020B. 
• Layout Variant set to C020B.

Note that authors have also the option to modify the Background Color on the Content Tab. Once the author modifies the Background Color, the "bgColorState" property is auto created on the Local Settings. The selection of Legacy (Gray) color also auto creates the "backgroundToggle" property on the Local Settings and this can be used as shortcut to enable and disable the Legacy (Gray) Background Color.

Creating the Teasers:

The primary use case is for content comparison specifically for products. Each Teaser will serve as a column or product tier. Authors can add as many Teasers as desired. Your Teasers should contain the following:

• Teaser Title - This is the Column Header. 
• Teaser CTA Label - This is the Column Price Description. 
• Teaser Header - This is the Column Price or Price Value. Text entered here is auto reflected on the "HeaderLabel" under the Local Settings
• Pictures and Other Media - This includes the image or video shown on the featured content.
• CTA Label and Call-to-Action Button -  Authors can add up to two CTAs per column to drive users to associated product information pages as needed under the Teaser Options Section. Up to 2 CTA buttons (one Primary, one Secondary) can be configured per column as needed.  CTA buttons drive users to a supporting child page, such as a Demo Sign Up form, marketing/PDP page or Sales Contact experience as appropriate. To setup single or two CTAs,
  • Authors must enable the radio button for "Use Linked Call-to-Action Label".
  • Below the "Use both Custom & Linked Call-to-Action Label" radio button, authors can
    • add a Custom CTA Label -  This is the Column Eyebrow Label or mini-descriptor shown right on top of the Teaser Title. Text entered here is auto reflected on the "callToActionCustomText" under the Local Settings. and
    • drop your teaseable content - This can be an External Link, Page, Download and/or Video.
• Teaser Text - This is the Column Body Copy used for Product Description. Flexible authoring allows authors to utilize rich text content formatting  and iconography to highlight key tier features for comparison.
  • To add an eyebrow label on the feature section of the column ex. "Included Features", the author should add a property under the miscellaneous resource bundle. Below is an example. The value can be modified but note that it will affect eyebrows of all C020B feature section. Creating another property name for a different use case requires IT enhancement. 
    • Property Name: product_included_features
    • Value: Included Features
    • Type: String
  • To add a list, the author should add the text as Bulleted List (check mark icon as bullets). Numbered list can also be used. 
• Set Layout variant to "Default". 

On the Local Settings, authors can also add the "callToActionDisabled" property for ease of enabling and disabling CTA Button display.

Note that the maximum characters per section is as follows: 

• Section Heading: 80
• Section Body: 350
• Column Eyebrow: 40
• Column Title: 65
• Column Pricing: 40
• Column Body: N/A (concise list text recommended)
• Column CTAs: 25