Media with Content

Overview

Use the media with content feature to pair an image with text in a wide section of your page. The call to action button is optional. Several layout options are available, including background color, image, and column size.

Usage guidelines

• Only use the left / right alignment options in full-width page sections.
• Keep headings and descriptions compact.
• Use headings appropriately. Headings must be accompanied with paragraph text, and must fit into the page hierarchy.
• Avoid linking generic phrases, such as "read more" or "learn more." Instead, link descriptive text.
• Select images carefully:
  •  For all alignment options, the design works best when the image selected is taller than the height of the content itself. For longer text excerpts, a portrait image is recommended. When pairing with a landscape image, less text should be included.
  • For the overlay option (text on top of image), it is best to use an image without large areas of white or busy colors and textures. The component will automatically darken the image to make the text on top more legible, but some additional photo editing might be necessary to make the content fully legible if the image is light.
• Ensure images are sized to load quickly. This will decrease page load time and improve search engine optimization.
  
  • Full-width images should be no more than 1400 pixels wide.
  • In-page images should be no more than 800 pixels wide.

Responsive layout

This feature loads differently on smaller screens, such as phones and tablets, than it does on wider desktop or laptop computers. Always review how your page will load across different page sizes before publishing.

Options

• Background color
• Column width
• Image location (float left or float right)
• Text overlay with image; text floating to left or right of image

Documentation

• Learn how to implement the Media with Content feature (login required)