Big Feature Left Top-Aligned and Big Feature Right Top-Aligned

Layout Variant: C045, C046

C045B, C046B (w/ Two Column Option)

Content Type: Collection

Aspect Ratio: 

• Image on base component: 3:4 / 16:9

Expected Use:

This component is primarily used to highlight a business feature with image/video and accompanying copy layout with or without options for variable content requirements.

• For C045, the image/video is positioned left side of page and copy is positioned right side. For C046, the mage/video is positioned right side of page and copy is positioned left side. Image/video and copy are top-aligned. Component can be alternately stacked with big feature left top-aligned for balanced page presentation. This is best used when you need to prominently feature detailed informative content such as event or program information with an associated image or video.
• C045/C046 can be used in place of C011 – Big Feature Image Right wherever it is important to conserve vertical space consumed by larger C011 image. 
• A read more toggle can be added to C045/C046, 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.
• The only difference in the C045B/C046B is the ability to add more formatted text to the body copy in a 2 column format. This was designed for the Events Layout with the idea of allowing calendar entries and mapping for the location. This is best to use when you need to prominently feature a video or image but don’t want the verticality of the C010 or C011 component.

Building the C045/C046 Component:

For additional needs of the C045B/C046B component see below.

On the Content Tab include a Teaser Title, Text and an Image that will appear at the left side of the component for C045 and right side for C046. Remember to set your Layout Variant to C045 or C046 depending on which side of the component you wish the image to appear. This component is specifically designed to support a Video or a Picture. In addition, 1 to 2 CTAs can be used that can link to a Generic Details Page, Category Page, PDP or PDF. Your Component should contain the following:

• Teaser Title - The main headline of your component. 
• Teaser Text - The body copy of your component. This is simple rich text. The C045B/C046B allows for further formatting of text as noted below.
• Pictures and Other Media - This includes the image (Video or Picture) shown on either left or right side of the component. 
• Items - Items are not used in the C045/C046. They are used to provide additional text copy in the C045B/C046B
• CTA Label and Teasable Content - This is required for the custom CTA text shown regardless of what type of content you are teasing.
  • For a single CTA: 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 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.
• Layout Variant - set to C045 or C046

Adding Optional Elements for C045/C046:

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). 

Additional Options for the C045B/C046B Component:

The C045B/C046B is built exactly as the C045/C046 shown above. The additional functionality is that you can utilize further styled body copy by adding additional collections to the Items List. 

• Items - You will add two Collections to the Items List of your C045B or C046B Collection. See Column Collections below to build your Collections for the Items List
• Layout Variant - Set to C045B or C046B

Column Collections for Additional Formatted Body Copy:

These two Collections create two columns of body copy below your teaser text you have entered in the main component collection. The CTAs in the main collection will shift below the two additional columns. This is actually styled as a C031 Layout Variant.

• Teaser Title - Label for the column (eg. Where, When)
• Teaser CTA Label - Not used in this collection
• Teaser Text - Short lines of text for the location and date. See regression example for adding calendar entries and mapping directions. Examples here (further instructions will be available in the future):
  • Get Directions: https://www.bing.com/maps?osid=2084b427-37a2-4d85-b6d2-dab187d32ff2&cp=38.733996~-90.363126&lvl=12&v=2&sV=2&form=S00027
  • Calendar: https://calendar.google.com/event?action=TEMPLATE&tmeid=N24xMmJxNWc1YW9zaGNhMGxhMXQ1cWlibDcgc2hvcGUwZjlzZjY4NDk2ZnZoMzZrY3RpMmtAZw&tmsrc=shope0f9sf68496fvh36kcti2k%40group.calendar.google.com
• Items - Not Used
• Call-to-Action-Button - While this is part of the C031 component, it is not utilized in this use case when embedded inside the C045B/C046B component
• Layout Variant - Set to C031