Data replay

Design and usage

Structure

• Must have a definition list pair for pattern use
• Data consists of numbers, data replay and text

• Width variations must adhere to definitions:

  • Desktop (50:50, 60:40, 70:30, 80:20, 90:10 but only for symbols, 10:90 but only for symbols, 20:80, 30:70, 40:60)
  • Tablet (50:50, 60:40, 40:60, 90:10 but only for symbols, 10:90 but only for symbols)
  • Mobile (50:50, 60:40, 40:60, 90:10, 10:90)

  Ratio divides across break points:

  • 50:50 divide will appear 50:50 on all break points
  • 90:10 and 10:90 divide will appear as 90:10 or 10:90 on all break points
  • 60:40, 70:30 and 80:20 on desktop will appear as 60:40 on tablet and 60:40 or 50:50 on mobile
  • 40:60, 30:70 and 20:80 on desktop will appear as 40:60 on tablet and 40:60 or 50:50 on mobile
  • 40:40:20 on desktop will appear as 33:33:33 on tablet and stacked columns on mobile
• Columns progressively decrease or increase based on device size
• Column widths of data replay; max 8 columns wide, minimum 3 columns wide
• Can appear in-line or in a card
• Can have keylines in or outside of cards
• PROHIBITED: Do not nest definition lists within definition lists
• Can include primary, secondary or tertiary buttons within card or placed with in-line variant
• Cards can have a white #FFF background with a grey keyline (#CCC) or grey #EEE background

• Data replay can have a title or subtitle with body copy or a combination of all three:

  • Heading must be (H2 #5C596D)
  • Subtitle must be (H3 Light #5C596D)
  • Body copy (16px #444)
• Data replay columns; both columns have the flexibility to be either regular body copy/semi-bold body copy or H3 regular/H3 semi-bold (#444444)
• Data replay can have a highlighted row. This is a block colour of #5C596D with the copy changing to white. This highlight row can ONLY sit at the bottom of the data replay columns. It also spans the full width of both data relay columns

• Side by side data replay also has a stacked version where the data title and data contents are placed underneath each other, still maintaining the regular/semi bold combination at H3 or body

  • The stacked variant of data reply can appear at 4 cols or 6 cols in width

Labels

• Data replay can have a title
• 1 column for title
• 1 column for associated description

Errors

• Notification card errors can sit within data replay cards or in-line

Accessibility and Screen Readers

• Read column title before reading cell

Placement

Definition lists can be placed anywhere:

• Within a card (including notification cards)
• Without a card

• Only be placed on white #FFF, light blue #E5EDF8 or light grey #EEE

  • PROHIBITED: use on accent colours
• Within components like show/hides, show more
• Inside tables
• Within the way-finder lock-up under the H2
• Cards can be placed within a carousel

• Can be placed alongside another data replay, card or in-line;

  • 8 col + 4 col
  • 6 col + 6 col
  • 6 col + 3 col + 3 col
  • 4 col + 4 col + 4 col
  • 4 col + 8 col
  • 3 col + 3 col + 3 col + 3 col
  • 3 col + 3 col + 6 col

Positioning

• Long labels for title with values:

  • Data replay can also be positioned side-by-side where applicable. Each label within a column will stack for tablet and mobile. Recommended to use with 50:50 variants only.

Use case and exception scenarios

• When information needs to be placed side by side for example, comparisons, product details etc.
• Information that users will scan for

Design notes

• Long labels for titles with values:

  • Recommended to keep these to 64 characters i.e. 2 lines of content if possible. Aids scan-ability and comprehension of multiple data points.

• Long labels for titles with icons:

  • 20px label variants: Recommended to keep these between 115-118 characters
  • 16px label variants: Recommended to keep these between 145-147 characters