Images

Content blocks included on this page:

Header: Image

Image: Animated

Image: Full Bleed

Image: Text Overlay

Text

Cards (Min 2)

Container: Media + Inner Blocks

Media: Columns (2 or 3)

Media: Thumbnail Gallery

Header: Image

OUTER BLOCK

The Header: Image outer content block allows one background image with a short page title. It is should only be used at the top of the page because the text is an H1.

Watch Video

Page Title

Image: Animated

OUTER BLOCK

The Image: Animated outer content block provides a two-column layout where the left column provide space for a background image and, if desired, a foreground image on top of it that animates into place when the user scrolls passed it.

The right column allows you to place Inner Content Block.

Watch Video

With foreground image

The foreground image will animate as users scroll past it. It may take some time to edit the image to ensure this works well, e.g. remove the foreground objects, fill in the gaps in the background, keeping the edges aligned.

You can fit in any inner block on the right side; this is a Text block, followed by a Button: Text block.

Without foreground image

The content block still works without a foreground image, thus removing what makes this block "animated."

You can fit in any inner block on the right side; this is a Text block, followed by a Callout: Quote block.

Here's a really persuasive quote"

Source Name, Role, Location

Image: Full Bleed

OUTER BLOCK

The Image: Full Bleed outer content block allows you to promote an image in full bleed. You can change the focal point and the crop. Please be sure the image is at least 4000px wide.

Watch Video

Image: Text Overlay

OUTER BLOCK

The Image: Text Overlay outer content block allows you to promote an image in full bleed with a few text fields on top of it.

You can change the focal point and the crop of the image. Please be sure the image is at least 4000px wide.

Watch Video

Text fieldStats field

Text

INNER BLOCK

The Text inner content block by adding Container: Inner Blocks (outer block) and Text (inner block).

Watch Video

This inner content block will allow to embed an image like this:

Which you can also crop:

Cards (Min 2)

INNER BLOCK

If you need to display two images side by side, you can use the Cards (Min 2) inner block without a title or link. There's a minimum of two, but you can display three next to one another one one row. Once you have more than three images, it will return to a two-column layout:

Watch Video

Container: Media + Inner Blocks

OUTER BLOCK

With the Container: Media + Inner Blocks, you can place an image on the left side, which will stretch vertically to match the height of the inner blocks on this side. You can place any inner block on right side. Below shows the Text block followed by Link: Button.

Watch Video

Header 2

Header 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu lectus euismod, luctus augue et, rhoncus turpis. Morbi iaculis neque et est porta faucibus. Integer arcu diam, semper nec fermentum ac, malesuada ac turpis. Etiam velit mauris, tristique id justo vitae, eleifend bibendum diam. Aenean vel faucibus tortor. Nullam congue erat vel viverra luctus. Mauris sollicitudin lectus pellentesque tristique ullamcorper. Donec finibus dignissim dolor, sit amet tempus diam commodo at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla maximus felis ut posuere.

Media: Columns (2 or 3)​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍​‌‍‌‍‍‌​‌‍‌‌‌​‍‌‌‍‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‍‌‍‌​‍‌‍‌​‍‌‍‌‌‍​‌‌‍‍‌‌‍‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌​‌‌‍​​‌​​​​‌‌‍​​‍‌‌‍​‍​‍‌​​‍‌‍‌‍‌‍​‌​​​‍‌​‌​‌‍‌‌​‌‍​​‍​‍‌‌‍​‍​​‍​‍​‌‍​​‍‌​​​​‌‌‍‌‌‌‍‌‍​‌‌‌‍‌​​‌​​‌​‍‌‌‍​‍​‍​‌‍​‍​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍‌​‌‍‌‍​‌‌‌‌‍‌‌‍‌‌‌‍‍‌‌​​‍‍‌​​‌‍​‌‌‍‌‌‍‌‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍​‌‍‍‌​‌‍‌​​​​‌‌‌‍​‌‍​‌‌‌‌‍‌‌‌‍‌​‌​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​​​‌‍​‌​‌​​‌‍​‍​‌‍​‌‌‍​​​‌‍‌‍‌‍‌‍​​‍​‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‌​‍​​‌‌​‍​​​​‍‌​​‌​​​​​‍‌‌‍​‌‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍​‍​‍​‌‍‌‌‌‍​‍​​‍​‌‌​‌​​​​‌‍‌‌​‌‍​‌‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍​‌‍‌‍‍‌​‌‍‌‌‌​‍‌‌‍‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‍‌‍‌​‍‌‍‌​‍‌‍‌‍‍‌‌‍‌​​‌​‌‌‍​​‌​​​​‌‌‍​​‍‌‌‍​‍​‍‌​​‍‌‍‌‍‌‍​‌​​​‍‌​‌​‌‍‌‌​‌‍​​‍​‍‌‌‍​‍​​‍​‍​‌‍​​‍‌​​​​‌‌‍‌‌‌‍‌‍​‌‌‌‍‌​​‌​​‌​‍‌‌‍​‍​‍​‌‍​‍​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍‌​‌‍‌‍​‌‌‌‌‍‌‌‍‌‌‌‍‍‌‌​​‍‍‌​​‌‍​‌‌‍‌‌‍‌‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍​‌‍‍‌​‌‍‌​​​​‌‌‌‍​‌‍​‌‌‌‌‍‌‌‌‍‌​‌​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​​​‌‍​‌​‌​​‌‍​‍​‌‍​‌‌‍​​​‌‍‌‍‌‍‌‍​​‍​‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‌​‍​​‌‌​‍​​​​‍‌​​‌​​​​​‍‌‌‍​‌‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍​‍​‍​‌‍‌‌‌‍​‍​​‍​‌‌​‌​​​​‌‍‌‌​‌‍​‌‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‍‌‍‌‌‌‍‌​‍‌‍‍‌​‌​​‌‍​‌‌‍​‌‍‌‌​‌‌‍‌‌‍​‌‌‍‍‌‌‍‍​‍​‍‌‌

INNER BLOCK

With the Media: Columns (2 or 3), you can add two or three images in a row, in a vertical alignment. You can include a plain text caption, or not.

Watch Video

Caption — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam nisl ut leo lacinia, quis placerat leo aliquam. Mauris nec varius sapien. Donec a ante est.

Caption — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam nisl ut leo lacinia, quis placerat leo aliquam. Mauris nec varius sapien. Donec a ante est.

Caption — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam nisl ut leo lacinia, quis placerat leo aliquam. Mauris nec varius sapien. Donec a ante est.

Media: Thumbnail Gallery

INNER BLOCK

The Media: Thumbnail Gallery inner content block allows you to display a thumbnail gallery with multiple images. It is recommended that you include at least three images, but no more than six because the functionality requires that users scroll down to click the thumbnail and scroll up to view the enlarged image.

const suppressList = ['/','/home','/act']; const pathname = window.location.pathname; if (!suppressList.includes(pathname)) { document.querySelector('body').insertAdjacentHTML('beforeend','
'); }