Versions Compared

Version Old Version 9 New Version 10
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component

Panel
panelIconIdefa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:Storybook:
panelIconText:Storybook:
bgColor#F4F5F7

Storybook component

The Image + Text component is a side-by-side layout component consisting of an image and text area

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

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

  • Use an Imagethat 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.

Warning

Dont’s

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

  • Don’t link the image

Anatomy

OPTIONALNot yet released

Item

Component

Content type

Notes

1 - Image

Image

JPG, PNG

Status
colourRed
titleMANDATORY

2 - Overline

Heading block

Text

Status
colourGreen
title

3 - Heading

Heading block

Text

Status
colourRed
titleMANDATORY

4 - Description

Heading block

Text

Status
colourGreen
titleOPTIONAL

5 - Links

CTA Block

n/a

Status
colourGreen
titleOPTIONAL

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

Accessibility 

  • The heading must come first in the DOM.