Photo block grid

PATTERN OVERVIEW

This pattern groups multiple images into a grid structure, separating each with a thick white rule. Images are inserted as a full column and or in a row of two. This pattern includes a stylized treatment for copy.

Pattern options built into the AEM component:

• Include up to three rows and two columns.
• A linear gradient (shades of orange) can be applied over top the image. 
• A white overlay can be applied overtop the photo.
• Type can appear as white or black.

Guidelines

• Type must be readable overtop the images and meet Web Content Accessibility Guidelines for color contrast. 
• On mobile the image is cropped to show the right third of the image.

AEM component: Use the "Photo block" component to build this pattern. 

Note: The font and button styles are built into the component and cannot be alterted by a content author.

Requirements

Intro: Up to 45 characters max (including spaces)

Heading: Up to 60 characters max (including spaces)

Body copy: Up to 140 characters max (including spaces)

Image size: TBD

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For subheadings and body copy, use sentence case with complete and punctuated sentences.

Type alignment: Left aligned