Media Gallery Component

What is it? 

A collection of multiple images displayed in a grid format. 

Elements 

• Shows a mix of large, small, horizontal and vertical images within a single grid.
• The layout is customizable with block orientation options.
• The component can be stacked to create a larger media area.

How do you use it?

• Choose related images: Ensure that each image supports the message you want to express.
• Select images that are cohesive and fit the overall theme to help users understand your content.

Media Gallery example one: 

• Top row - Image 1: left aligned
• Top row - Image 2: Landscape
• Top Row - Image 3: (only displays if second image is landscape)
  • Image 2 Orientation: Landscape or portrait
• Image 4 orientation:
  • Half-width
• Bottom Row - Image 5 (only displays if fourth image is half-width)

Media Gallery example two (opposite of example one):

• Top row - Image 1: right-aligned
• Top row - Image 2: Portrait
• Top Row - Image 3: (only displays if second image is landscape)
  • Image 2 Orientation: does not display because the second image is portrait
• Image 4 orientation:
  • Full-width
• Bottom Row - Image 5 (only displays if fourth image is half-width) does not display because fourth image is full-width 

Media gallery example three (two media galleries stacked together to create a larger media gallery): 

• Top row - Image 1: right-aligned
• Top row - Image 2: Landscape
• Top Row - Image 3: (only displays if second image is landscape)
  • Image 2 Orientation: displays because the image is landscape
• Image 4 orientation:
  • Full-width
• Bottom Row - Image 5 (only displays if fourth image is half-width) does not display because fourth image is full-width
• Top row - Image 1: left aligned
• Top row - Image 2: Portrait
• Top Row - Image 3: (only displays if second image is landscape)
  • Image 2 Orientation: Portrait
• Image 4 orientation:
  • Half-width
• Bottom Row - Image 5 (only displays if fourth image is half-width)