C080 Content Editor's Guide

Flexible Card Grid

Layout Variant: C080

Content Type: Collection

	Teaser Title	Teaser CTA Label	Teaser Header	Teaser Text	Picture & Other Media	Items	CTAs
C080 Collection	Yes	No	No	No	No	Yes	No
Items	Yes	Yes	No	No	Yes	No	Yes

Expected Use:

A versatile component that can be used to group 2, 3 or 4 pieces of teaser content in a row, with up to 8 max teaser items within 2 rows. Ideal to preview editorial content like Innovation or Perspectives stories or to tease a set of innovation stories, thought leadership pieces, or case studies.

C080 can be used to feature a minimum of 2 — up to a maximum of 8 — pieces of teaser content. Cards are intended to flex their dimensions to adapt horizontally to the number of grid items displayed and vertically based on the amount of content they contain. For 2-3 items, cards will display at 33.33% the container width (excluding gutters). For 4-8 items, cards will uniformly display at 25% the container width (excluding gutters), with items in excess of 4 wrapping onto a new row. Row content should be center-aligned regardless of the number of cards displayed.

Content authors may optionally omit the teaser title (section heading) for this component when content is closely associated or intended to be “paired” with the component preceding it (e.g., Perspective lockup with C007B). When the teaser title is omitted, the space for the heading and spacing below it will collapse, shortening the spacing above the card content.

The entire container area of each card is interactive and can either be linked to an internal/external child page, trigger display of video content in an overlay or initiate download of a document to the user’s machine.

Building the Component:

To setup C080, your components should contain the following:

Add a Teaser Title - This is the Header Title of the component.
Teaser Header, Teaser Text and Image or Other Media are not used in this component.
Add the Teaseable Items - The teaseable content that can be displayed on the component are External Links, Page, Videos, Downloads or Teasers. Any of which can be directly added on the Items Section. The Images or Other Media as well as the CTA will come from the added teaseable content.
Set the Layout Variant to C080.

Note that on the Local Settings, the "noPaddingTopToggle" property can be added. When this button is enabled, the cards appear slightly larger.