C091 Flexible 2-Column Feature with Icon Grid

You can construct this component with the following possible options:

  • No categorization of column is defined.  The left column displays the optional Teaser Title, Teaser Header, flexible Body Copy and CTA. The right column displays the callouts. 
  • Callouts display the optional Teaser Title of the Item and flexible Body Copy as subheading.
    • The callouts flow from left-to-right based on the order the author entered it on the Items. 
    • Each row displays 2 blurbs before it wraps additional items onto a new row and so on. A grid of 2–8 (recommended max) blurb items.
  • When working with columns you have equal column width but column height varies. The tiles auto adjust to the defined maximum length and adapts to the number of items in a given row.
  • 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.
    • Note that if icons used are static assets with a fixed dark color, it’s recommended to only use default White, Grey, and Brand Accent background color configurations with this component.
    • Non-static icons are flexible and can be displayed using any background color. 

SPECIAL NOTE: While not specifically called out, you may add one to four CTAs below the body copy by selecting the "Use Linked Call-to-Action Label" and adding a teasable item (or items) that have defined CTAs. The examples below show various use cases for C091 using the four variations of the descriptive CTA icons for page, download, video, and external link.


Optional Header or Label

This is the optional body copy.

Optional linked CTA that can display maximum of four (4) CTAs. 

On Samples 1 to 3, the Items consists of Teasers with C071 - Mega Flexible Column Blurb as Layout variant.  C071 is a small sub-component copy block utilized to fill in other flexible components like C067, C068, C069 and C070.

Optional 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. The icons used as samples on numbers 1 to 3 work well with any Background colors. 

.    

New Content Item (3)
Optional Item Header or Label

Optional Item body copy. This sample is set up as a Teaser using C071 blurbs and designed to have no linked CTA or Teaser Target.

New Content Item (5)
Easy-to-Use Portal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Optional Item Header or Label

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Optional Eyebrow Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut sollicitudin lacus. Morbi a elit eleifend, commodo magna non, bibendum orci. Curabitur nec arcu consequat, consectetur leo quis, molestie lacus. Curabitur ut dui elementum, dictum velit ac, malesuada libero. Morbi malesuada imperdiet mauris, vel lacinia velit. Donec ultrices id quam a elementum. Aliquam eget nibh vitae arcu interdum viverra vitae quis enim. Donec justo ante, tempus eu malesuada et, faucibus malesuada velit. Cras bibendum neque mattis commodo sollicitudin. Vestibulum semper sodales purus, ac ultrices leo pharetra eget. Suspendisse nec nibh sit amet augue luctus faucibus. Pellentesque pharetra, justo et pretium hendrerit, est nisi vestibulum sapien, sed pulvinar elit magna non nunc.

New Content Item (1)
C071 Mega Blurb Heading Sample

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil.

New Content Item (4)
Extensive Compatibility

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo facilisis leo vel fringilla.

New Content Item (6)
Quick Control with Batch Operations

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Alert
Smart Alerts

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

H2 Heading Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut sollicitudin lacus. Morbi a elit eleifend, commodo magna non, bibendum orci. Curabitur nec arcu consequat, consectetur leo quis, molestie lacus. Curabitur ut dui elementum, dictum velit ac, malesuada libero.

New Content Item (1)
C071 Mega Blurb Heading Sample

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil.

New Content Item (4)
Extensive Compatibility

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo facilisis leo vel fringilla.

New Content Item (6)
Quick Control with Batch Operations

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Alert
Smart Alerts

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

New Content Item (3)
Optional Item Header or Label

Optional Item body copy. This sample is set up as a Teaser using C071 blurbs and designed to have no linked CTA or Teaser Target.

New Content Item (5)
Easy-to-Use Portal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Piggybank
Energy Savings Features

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Porttitor lacus luctus accumsan tortor. Diam quam nulla porttitor massa id neque aliquam. Ornare massa eget egestas purus viverra.

New Content Item (2)
Keypad Lockout

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

Please enable JavaScript to use this website.