Style Guide
Image and Media Blocks
Image Block
Header (Select H2)
Body content goes here. It will be centered within the block. At mobile widths, an optional mobile fallback can be included at a width of 612 pixels.
Media Block
Media Block with an Image and Left Content
This is the body content. A CTA can be added as a body block below (as shown in this example). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit eros, tristique ut tortor sed, elementum varius urna.
Blue Button (Small)
Media Block with YouTube and Left Content
This is the body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit eros, tristique ut tortor sed, elementum varius urna.
Desktop and Mobile Overlap Block
This is the Caption for this Block
Desktop Overlap Block
This is the Caption for this Block
Mobile Row Block
This is the Caption for this Block.
Photo Collage Block
Eyebrow
This is a photo collage "With Body Copy (Left)" The images will constrain to the following sizes:
- Top left (439x244 px)
- Bottom left (351x210 px)
- Top right (277x165 px)
- Bottom Right (351x289 px)
Images can either be square or 16:9, but 16:9 works best for cropping with the exception of the bottom right (which crops a little too heavily, a square works best). You may need to test to see what works best.
Eyebrow
This is a photo collage "With Body Copy (Right)" The images will constrain to the following widths:
- Top left (439x244 px)
- Bottom left (351x210 px)
- Top right (277x165 px)
- Bottom Right (351x289 px)
Images can either be square or 16:9, but 16:9 works best for cropping with the exception of the bottom right (which crops a little too heavily, a square works best). You may need to test to see what works best.
Eyebrow
This is a photo collage "Default." The copy is moved to this location.
Images in this version constrain to a width, but can be at any height. The recommendation is to use 500px at 16:9 or square for image 1, 2, and 4, and use 1000px at 16:9 for the top left (image 3)