Skip to Main content

3-Stack Block

Web Style Guide

The 3-Stack Block is a complex content layout that combines a heading, background block, and image/text block.

All elements of the layout are editable, including the image used in the background. The background image automatically applies a blue overlay to create enough contrast with the white text.

Example

The screenshot below shows an example of the 3-Stack Block.
screenshot of the 3-Stack Block content layout

Customizations

The 3-Stack Block has the following customizable options:

  • The arrow can be placed on the right by applying the “flipped” option to the background block section.
  • The order of the image/text block can be reversed by applying the “flipped” option to the text section.
  • The background of the text section can be changed by applying one of the following options: Yellow Texture Background, Blue Texture Background, or White Texture Background.

Note

The 3-Stack Block is already a “wide” layout, so it will extend beyond the main content area without needing to use the Wide Block.