Image Overlap Row (Medium)

A full-width, single-column row with a content/image overlap block that is limited to 2/3 of the content width.

Categories

Image and Text

Keywords

Preview

 Copy Pattern
A placeholder image

Two-thirds

This pattern uses 8 columns on desktop for when you want a smaller version of this block. The resulting image size on desktop is 584×440. This fits better with the standard text layout for when you don’t want a full-width feature.

Button

Note: Live previews like this may not be actual size. All previews are limited to the width of the content area and are displayed with additional padding around them.

Notes

  • This pattern is a Bootstrap row and needs to be placed inside an existing container.
  • This block is sensitive to the size of the image that you use and you may need to experiment with image sizes to get the look you want.
  • In a window that can show the full content with of 1200px, the image dimensions will be 584×440 pixels.
  • The text section inside the block does not accept all blocks. If you try to add more content to that area, the selector will be limited to just the allowed blocks.

Pattern Markup