The two column text+image module presents text and a CTA (Call to Action) alongside an image. Together with the full width text + image module it is used as the primary content module on the DECP. Depending on the context it can also be used to direct customers to higher priority content that complements or expands on the customer's current area of interest, by adding a CTA.
This module can be used in two alignments: image left or image right.
To present a video instead of an image, the Video + text module may be used, which is otherwise identical to this module.
Desktop
Mobile
Desktop
Mobile
Layout options
The two column text+image module consists of the following elements:
- Image*
- Headline* (if you’re using multiple ‘Two column text + image modules’ in a row, only the top one is required to include a headline)
- Body text*
- Button (optional)
* required element
The image position can be left or right on desktop. On mobile, the image is always positioned above the text.
Image
Aspect ratio: 16:9
For general imagery guidelines, please see the Imagery section.
Headline
Character limit: 56
Do not exceed three lines of text on 360px screens
Body text
Character limit: 360
For general copywriting guidelines, please refer to the Writing rules.
Colorways
This module has six colorways. In keeping with the general website color guidelines, the use of red should be judicious and mindful, taking into account its overall presence on the intended page.
Use this module as a content module to display text alongside an image or to direct customers to additional content by adding a CTA to the module.
The module is versatile and can be used frequently, however it should not be used more than three times in a row. It can be used at the bottom of a page to link customers to a single contact option such as requesting a consultation or contacting support. When more than one contact option needs to be presented, use the Get in Touch module.
To present a video in place of an image, use the Video + text module.
This module should not be used for content that requires long-form, paragraphic text. Instead, consider using the Tabbed content + text or Full width image + text modules.
Examples of use
DO: Use maximum advised character limit and correct text styling. Read more about typography.
DO: Shift the layout when using the two column text+image component multiple times in a row.
DON’T: Use the same layout one after another.
DON’T: Use headlines and body copy that are too long.