Data group

A data group is a way of laying out data for ease of scanning, ensuring that key information is afforded prominence. It can used to used to play information back to user that has already been entered.

Design and usage

Structure

• Consider key information that users will scan for and ensure it is afforded sufficient prominence.

• The data item can be either H2 or H3 styled font

  • PROHIBITED: Mixing variants within the same column row

• Data layout can only be used with these light and dark accent colour backgrounds:

  • Light

    • White #FFF
    • Light grey #EEE

  • Dark

    • Dark blue #001647
    • Accent blue #1A61BD
    • Dark teal #00788A
    • Dark grey #413E45
  • Do not use on any other accent colour

• Data layout groups can combine different column widths

  • Desktop:

    • 1 data group - up to 8 columns
    • 2 data group - 50/50% (6 + 6 columns)
    • 3 data group - 33% (4 + 4 + 4 columns)
    • 3 data group - 50/25/25% (6 + 3 + 3 columns) or vice versa
    • 4 data group - 25% (3 + 3 + 3 + 3 columns)

  • Tablet:

    • 1 data group - 6 or 8 columns
    • 2 or more data groups - 50/50% (4 + 4 columns)

  • Mobile:

    • 1 or more data groups - 4 columns

• Columns progressively decrease or increase based on device size:

  • 4 columns modifier, reduces to 2, then 1
  • 3 columns modifier, reduces to 2, then 1
  • 2 columns modifier, reduces to 1
  • 1 column by default shows 1 column of data and wraps
  • NOTE: the 4 column layout never decreases to 3 columns, it'll switch straight to 2 columns.
• For mobile, all columns will always display in a single column, with the data items wrapping down the page.
• For readability reasons, the width of the supporting text has a maximum of 8 columns (810px) regardless of the width of its parent container. In any case, its width should not exceed that of its parent's heading max width.
• Try to keep any supporting text short and informative. Up to 120 characters is recommended

• Supporting text can use the following styles:

  • Body copy
  • Text links within body copy
  • Bullet list
  • Ordered list; numerical or alphabetical
  • Tick/cross list
  • Plus/minus list
  • Numeric indicators

Accessibility and Screen Readers

• N/A

Placement

• Supporting text should sit 10px directly beneath its heading (H2 or H3)

Design anatomy

• Data layout: No top or bottom margin (determined by children; effective bottom margin 30px from last item) or padding (determined by parent)
• Supporting text area: 10px below heading, 30px bottom margin