50/50 image and text

The 50/50 image and text component is used to call attention to specific linked content on a page and feature it prodominantly. At larger breakpoints, this component has a two column layout to utilize extra screen real estate.

The half-width link blob component is a variation of the 50/50 image and text that does not use imagery.

A pair of 50/50 image and text components, as seen on a landing page template:


Use case

When to use
  • When a call-to-action, leading users to a deeper page in the section, needs a visual highlight on the page.
  • When an image or illustration helps users better understand the purpose of content.
  • Ideally, when an even number of these components can be featured together.
  • To help establish a hierarchy of linked content on this page.
When other options are better
  • When content doesn’t require imagery. Suggest using the half-width link blob component instead.
  • When there are multiple paragraphs of copy.


At breakpoints below 601, the two-column pattern transitions into a single column and stacks each instance in Z-order.

Breakpoints 601+ (2 column)

Desktop mockup

Breakpoints 600 and less (1 column stacked)

Stacked mockup

Content guidelines

  • Headings should be as succinct as possible, ideally staying on a single line at max column width (30 characters or less).
  • Description beneath heading should also be succinct, 2-3 lines at max column width of text; roughly 50-130 characters.
  • Call to action link should be one line; about 40 characters or less. Link content should follow link guidelines.


Mockup with specs
  • Imagery: 16:9 ratio, recommend 1600 x 900 pixels to account for retina displays.
  • Headings: Any heading size may be used, recommend H2-4.
  • Body copy: Avenir paragraph.
  • At breakpoints below 601: Heading sizes H3 and above automatically drop down one level and the mobile link style is used for the call to action link(s).