Page Comparison

Usage

The Image + Text component is a non-interactive content layout used to emphasise key points within the context of a larger story. Image + Text can consist of of an Image, Heading Block (Overline, heading, description), and a CTA Block.

Image + Text comes in two sizes, large and small, which are controlled by the viewport width.

Do’s

• Use to highlight, key points of a story or product benefit.

• Use an Image that is relevant to the point you are making.

• Use a CTA Block to direct users to additional relevant information, rather than substituting a link for lots of content.

Dont’s

• Don’t be overly verbose with your headings and description copy

• Don’t link the image

Anatomy

...

...

Use When 

• X

• X 

Don’t Use When 

...

X

...

See Figma for full list of variants.

Related/Similar Components 

• Asset Item

• X Picto itemX 

• Text list

Key Content  

...

X

...

 *Notes 

Visual Style 

X

Anatomy

...

Item

...

Type

...

Notes

...

1.

...

2.

Behaviour 

Progressive enhancement:

• Non JS

• JS

Editorial 

• X

• X

• X

Accessibility 

...

Key

...

Interaction

• Aria considerations

• etc

Analytics & Data 

• X

• X

Future Expansion 

Editorial 

Style

• Image + Text comes in two modes - Not to be confused with light and dark theme:

  • Default - to be used on the default brand background

  • Inverse - To be used on the inverse brand background

• Variations

  • Image left

  • Image right

• Size - controlled by the viewport

  • Large

  • Small

• Orientation

  • Horizontal on larger screens, stacked on smaller screens

• The grid split should not be set at 50% 50% as some brands may way other ratios.

Accessibility 

• The heading must come first in the DOM.

Analytics & Data 

• N/A

Future Expansion 

• We may introduce the concept of a “story block” which would stack a number of these components. We would need the possibility of configuring the grid gaps, etc to get different layouts.

• Expect that at some point a “surface colour” will want to (or need to) be applied to the text block and in that case, that block will need to include additional padding. This is especially so when we have image-based backgrounds or mid-tone backgrounds.

Wider Conversations that may impact this 

• Item: Description

• Item: Description 

Inspiration from elsewhere 

• X

• X

Examples

Insert here

...

• Asset item, Picto item, Text + Image, Text list - Are there all the same component?

...

Examples

• Supernova heros its product features with a series of modules that do not alternate left and right (best practice says not to alternate more than about three items. https://www.supernova.io/design-system-manager . When they have fewer items, they may chose to alternate them: https://www.supernova.io/for-design-system-teams . The images are object fit contain as they cannot be cropped.

• Image Added

...

Useful links

n/a