/
'Image + text' component

'Image + text' component

Component type

Block

Component possible inclusions

image, button, CTA

Design source (in Figma)

Image + text

Component status

https://rb-digital.atlassian.net/browse/DSD-232

Introduction

The image + text component is an information block consisting of an image and text area.


Anatomy

Key Content  

Item 

Type 

Notes 

Image

Image

 

Heading

typography

 

Description

typography

 

CTA block

component

 


Behavior

  • The whole element itself is not clickable. Clicking on a call to action will activate it (link or button);


Usage

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.

Don’ts

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

  • Don’t link the image


Analytics & Data 

  • Basic click tracking called by the onClick prop


Related/Similar Components 

  • Image

  • Teaser

  • Asset Item

  • Picto item