C067 Mega Flexible Columns

Layout Variant: C067

Content Type: Collection

Aspect Ratio: 

• 2:1 for main image in C067 component

Expected Use:

The C067 component flexes to up to three columns. In this image-free version, a 2-column approach is shown. Utilize the large headline to write a brief value statement of the product or service offered, and dedicate the smaller subcopy to name the offering and additional value that leads into the proof points below. Supporting points should have headers that either describe a feature or a benefit and one to two sentences that describe that point. Icons should visually represent their corresponding proof points.

• Include a C072 in the items list to include a footnote (optional).
• Add C071 Teasers as the items in the collection.
• Also see C067 and C070 for additional variants of this component.

This component is best used to list out and concisely explain key product or service features.

General Information:

As the name implies, this is a flexible multi-column design component that can be assembled in a number of configurations. The instructions illustrate the various options for authoring the C067 component. You can construct this component with the following possible options:

• While best in a 3 column format when using an image, it is also acceptable to use a two column format without an image. Other combinations are valid, but not recommended. i.e. you can use a two column with an image, but it is not an expected use case.
• In a 3 column format you can have the callouts flow from left-to-right or have them set in three defined columns.You cannot have callouts flow from left-to-right in a two column version.
• When working in columns you do not have to have equal height columns although this is the primary use case as there are no column headings to define any categorization of a column.
• With or without an image. Both two column and three column use cases are valid with or without an image.
• With or without icons. Icons should only be used where they add to the explanation (eg. numbers that are related to points on the image.) of the callout.
• With or without a footnote. This allows notes at the bottom of the component if additional explanation is needed.

Also see C069 and C070 for additional variants of this component.

GOVERNANCE: The use of this component is not a standard selection for most approved layouts and should be discussed with your platform lead before using. Further, the use of icons in any use case of this component must also have governance approval before publishing. If you feel you have a different use case than shown here you must seek governance approval from your platform leader.

Two ways to construct:

1. If you wish to have the callouts read from left to right and wrap to additional rows (if more than three callouts) then you will add Teasers with a C071 Layout Variant directly to the Items list of the C067 Collection. This option will only work for a three column style. This is the default functionality for Teasers directly added to the C067 Items list. This option will not allow you to create a two column version that flows from left to right.
2. To define specific columns of callouts, you will create a Collection for each column and add your C071 Teasers to the Collection for each column. The Collections are then added to the C067 Items list. This will allow you to have one, two or three columns depending on how many collections you add. Note, a single column is allowed, but is not a standard approved use case.

Creating a Mega Flexible Column Component:

 Create the C067 Collection:

• Create a new Collection
• Add a Teaser Title for the Heading of the component
• Add Teaser Text for the subheading
• Select the C067 Layout Variant
• Optional: include a Picture if you wish to have a techical image or other image between the subheading and the callouts
• Add C071 Teasers directly to the Items list if you want them to flow left to right. This only works for a three column style
• To set up separate columns, put the C071 Teasers into Collections and add the Collections to this component. You can have between 1 and 3 columns.
• Optional: Include a C072 as the last entry in the Items list to include a footnote. You can only include one footnote.

SPECIAL NOTE: While not specifically called out, you may add one or two CTAs to the bottom of the component by selecting the "Use Linked Call-to-Action Label" and adding a teasable item (or items) that have defined CTAs. Teasable Items can be a Page, Video, External Link or Download. 

Creating Collections to build your columns:

• Your Collections used to create one, two or three columns are simply empty shells with Default Layout Variant. You simply add as many C071 Teasers (see below) as you need to the Items list of each Collection.

Creating C071 Teasers for callouts:

• Create a new Teaser
• Add a Teaser Title for the heading of the callout
• Add Teaser Text
• Optional: Add Picture (icon). Again, note that the icon should be representative of and add value to the text in the callout. 
• Set the Layout Variant to C071

Creating C072 Teaser Footnote (optional):

• Create a new Teaser
• Add your footnote information to the Teaser Text
• Set the Layout Variant to C072