White tiles with a background color

PATTERN OVERVIEW

Overlay one, two or three white tiles over a background color or background image.

Guidelines

• Use to group similar content together.
  
• A gradient background image is used when more emphasis needs to be placed on the content and an off white background is used for standard content.
• When including more than two tiles, the length of content for each tile must be similar in length since the height of the container is determined by the amount of content contained within it. To even out the heights of the tiles, add a margin to the bottom of the text on the shorter side.
• Overall width of the containers depends on overall column width used:
  • Three containers can be set at 1080 or 1280 px span.
  • Two containers can be set at 800, 1080 or 1280 px span.
  • One container can be set at 1080 px span.
• To add the dark gray background, add the dark gray background image using the Full width image background component.  To add the off white background, use the AEM col control. CDO sites background options will vary based on the branding. 

Component names: Use the full width image background container, text3 and a one, two or three column control to build this pattern. 

specifications

Main heading (H2): Recommend 45 characters (including spaces)

Tile heading (H3) character count: Recommend 45 characters (including spaces)

Body copy character count: Recommend 140 characters (including spaces) 

Type: Heading use sentence case, no punctuation. For copy, use sentence case, in complete and punctuated sentences.

Type alignment: Left aligned

CTA: Use the button style that best suits the content.

Use  the background color image .jpg to add a dark gray background:

• Dark gray (#505152): /content/dam/optum3/optum/en/images/background-colors/background-505152.jpg