Versions Compared

Version Old Version 1 New Version Current
Changes made by

Remigiusz Bogdał

Karol Nowak

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 Media + 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 Image Video [Component] 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.

Warning

Dont’s

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

  • Don’t link the image

Anatomy

Item

Component

Content type

Notes

1 - Media

Image/Video

JPG, PNG/YouTube video

Status
colourRed
titleMANDATORY

2 - Overline

Heading block

Text

Not yet released

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 

  • Keep your copy concise.

    • The media + text component is designed to allow you to expand on elements of your story by providing a space for medium bodies of copy. It’s not designed to cater for multi paragraph copy and very long headings. Keep your copy concise.

Style

  • Media + 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

    • Media left

    • Media right

  • Size - controlled by the viewport

    • Large

    • Small

  • Orientation

    • Horizontal on larger screens, stacked on smaller screens

Accessibility 

  • n/a