Vertical Content Tabs

Layout Variant: C093

Content Type: Collection

Expected Use:

This new component displays content in tabbed containers, with a vertical list (on desktop) of different topic areas that allow a user to quickly toggle between different sets of information. Each tabbed section allows for copy, a CTA, and an image.  

C093 is intended to showcase software product content in a condensed yet visually compelling way. The C093 both leverages recent updates to our vertical tabs design pattern and enhances it to allow for aesthetically engaging product glamour shot imagery. This component enables editors to author 2 or more tab items focused on highlighting related product offerings, such as products within a suite, or key product features.

Each tab card can be authored with an optional eyebrow label, descriptive subheading and body text, CTA button and a product image. For the associated images to look and feel as modern and compelling as possible, it is recommended that all image assets used in this component should be formatted to display against transparent backgrounds.

Note that this component is not recommended for authoring non-product specific content items, such as case studies, events, or other editorial content.

Building the Component:

This component should contain the following: 

1.  Add Teaser Title – This is the section heading of the component. Maximum of four (4) lines can be displayed.

2.  Add Teaser Text - This is the optional Body Copy of the component. Maximum of eight (8) lines can be displayed.

3.  The Teaser CTA Label, CTA, Teaser Header and Pictures or Other media are not used in this component. These will come from the added Teaseable content on the Items. 

4. Add the Teaseable Items  - Add about  2 to 8 (recommended max) content items, each with a topic-relevant image, title and optional teaser text which can be setup up via a collection. Below are the steps:

• Add Teaser Title – This is the Item Label.  Maximum of four (4) lines can be displayed.
• Add Teaser Header - This is the optional Eyebrow Label or mini-descriptor displayed above the Teaser Title.  

• Add Teaser Text - This is the optional Body Copy of the Item. Maximum of eight (8) lines can be displayed.

• Add the Picture - This is the image displayed on the right side of the component. Note that videos cannot be added. 

• Add a CTA - The optional CTA drives users to associated child or supporting content page.
  • The teaseable content that can be added are as follows: External Link, Page, Video or Download.
  • Maximum of four (4) CTAs can be displayed. 
• Items are not used in this component.
• Set the Layout Variant to "Default".
• On the Local Settings under the System Tab, ensure that the "callToActionDisabled" is not ticked and "callToActionState" value is set to "4".

4.  Set the Layout Variant to C093 - Vertical Content Tabs.

5.  On the Local Settings under the System tab, ensure that the "callToActionDisabled" is enabled and "callToActionState" value is set to "1".

Authors can also modify the Background color of the this component under the Background Color section on the Content tab. Selecting the Legacy (Gray) background color for the first time, auto creates the 'backgroundToggle' boolean property on the local settings under the System Tab. Selecting a different background color auto unchecks the 'backgroundToggle' boolean property. 

If the author chooses to "turn on" the Legacy (Gray) Background color via the boolean property 'backgroundToggle' on Local Settings, then Legacy (Gray) background color will be displayed. If this property is unchecked via the local settings then the background color is set to 'Default' (no color).