Brief: Image + Text v. 0.1 [Block]

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, body), 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 body copy

Anatomy

See Figma for full list of variants.

Related/Similar Components 

• Asset Item

• Picto item

• Text list

Key Content  

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

  • Vertical

Accessibility 

• The heading must come first in the DOM.

Analytics & Data 

• N/A

Future Expansion 

• N/A

Wider Conversations that may impact this 

• 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.

Useful links

n/a