Text Left with optional CTA Right (No Promo) 

Layout Variant: C031

Content Type: Collection

Aspect Ratio: 

• N/A

Expected Use:

C031 (Text Left with optional CTA Right) is a lightweight content object designed to introduce sections or subsections of a page with an optional call to action button on the right for users who would prefer to view the product category catalog or jump to other sections of the site. Use this component whenever you have a simple headline, copy and CTA. Use for smaller blurbs or snippets of copy.

You can also construct the C031 without adding a CTA. This version can be for long-form or legal copy. Text is left aligned as opposed to the center-aligned copy available in the C034 Rich Copy Area component. The primary purpose of this component is to introduce sections or subsections of a page without a call to action. This component may also be used to break up image-heavy pages. Use this when you need to display left-aligned copy without a supporting CTA.

A read more toggle can be added to the component, truncating the body copy to 3 lines of text by default. When the toggle is unclicked, the rest of the content will appear below as normal. An optional background toggle can be enabled to display the collection with Legacy (Gray) background. Note: Each optional element is authorable individually and in combination with each other.

Building the Component:

For C031 Collection, on the content tab include the Teaser Title that wil appear on at the top most left side of the component and body copy text that will appear on the left area. Set the Layout Variant to C031. Your component should contain the following:

• Teaser Title - The main headline of your component. 
• Teaser Text - The body copy of your component. 
• Pictures and Other Media - No image shown on the component. 
• CTA Label and Teasable Content - Add one or two CTAs that can be used to link to another page on the website. This is required for the C031 linked or custom CTA text to be shown regardless of what type of content you are teasing. Teasable content variations include Page, Download, External Link or Video.
  • For a single CTA: This is entered in the Call-to-Action-Button section with the radio button selection of "Use Default Call-to-Action Label" if you wish to use the standard CTA labels available for your teasable content or the radio button with selection of "Use both Custom & Linked Call-to-Action Label" where you will drop your teasable content along with entering your custom CTA label. 
  • For two CTAs: This is entered in the Call-to-Action-Button section with the radio button selection of "Use Linked Call-to-Action Label" if you wish to use the CTA label from your teasable content. You cannot use the "Use both Custom & Linked Call-to-Action Label" when using two CTAs.

Adding Optional Elements:

In order to 'turn on' the Read More so it is visible on the screen, add a boolean property 'readMoreDisplayed' to the component's Local Settings. If this property is checked, the Read More will be displayed. If this property is unchecked or it is not added in the Local Settings then the rest of the content will appear below as normal.

To add a short cut to "turn on" the Legacy (Gray) Background color, add a bolean property 'backgroundToggle' to the component's Local Settings. If this property is checked, then Legacy (Gray) background color will be displayed. If this property is unchecked or it is not added in the Local Settings then the background color is set to 'Default' (no color).