Styleguide › GOV.UK Elements

Data

Repo • Page source

Data is recommended as an alternative to using images.

Data visualisation

For screen readers, ensure the data value appears first so it makes sense when read aloud.

24
Ministerial departments
80px
16px 

<div class="grid-row">
  <div class="column-half">
    <div class="data">
      <div class="data-title">
        24
      </div>
      <div class="data-subtitle">
        Ministerial departments
      </div>
    </div>
  </div>
  <div class="column-half">
    <div class="data">
      <div class="data-title">
        80px
      </div>
      <div class="data-subtitle">
        16px
      </div>
    </div>
  </div>
</div>
div.grid-row
div.column-half
div.data
div.data-title 24
div.data-subtitle Ministerial departments
div.column-half
div.data
div.data-title 80px
div.data-subtitle 16px
56/154
on GOV.UK
48px
16px 

<div class="grid-row">
  <div class="column-half">
    <div class="data data-smaller">
      <div class="data-title">
        56/154
      </div>
      <div class="data-subtitle">
        on GOV.UK
      </div>
    </div>
  </div>
  <div class="column-half">
    <div class="data data-smaller">
      <div class="data-title">
        48px
      </div>
      <div class="data-subtitle">
        16px
      </div>
    </div>
  </div>
</div>
div.grid-row
div.column-half
div.data.data-smaller
div.data-title 56/154
div.data-subtitle on GOV.UK
div.column-half
div.data.data-smaller
div.data-title 48px
div.data-subtitle 16px

Data in a table

Consider putting content into tables to make it easier to scan.

Example of numeric table usage on GOV.UK

Date Paper form Digital
25 November to 1 December 2013 2,763 1,792
2 to 8 December 2013 2,850 1,740
9 to 15 December 2013 2,388 1,683 

<table>
  <thead>
    <tr>
      <th scope="col">
        Date
      </th>
      <th class="numeric" scope="col">
        Paper form
      </th>
      <th class="numeric" scope="col">
        Digital
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        25 November to 1 December 2013
      </td>
      <td class="numeric">
        2,763
      </td>
      <td class="numeric">
        1,792
      </td>
    </tr>
    <tr>
      <td>
        2 to 8 December 2013
      </td>
      <td class="numeric">
        2,850
      </td>
      <td class="numeric">
        1,740
      </td>
    </tr>
    <tr>
      <td>
        9 to 15 December 2013
      </td>
      <td class="numeric">
        2,388
      </td>
      <td class="numeric">
        1,683
      </td>
    </tr>
  </tbody>
</table>
table
thead
tr
th scope="col" Date
th.numeric scope="col" Paper form
th.numeric scope="col" Digital
tbody
tr
td 25 November to 1 December 2013
td.numeric 2,763
td.numeric 1,792
tr
td 2 to 8 December 2013
td.numeric 2,850
td.numeric 1,740
tr
td 9 to 15 December 2013
td.numeric 2,388
td.numeric 1,683

Not all content in tables should be right aligned.

Example of table usage on GOV.UK

Dates and amounts
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
Tell the mother’s employer 28 days before they want to start maternity pay 

<table>
  <thead>
    <tr>
      <th colspan="2">
        Dates and amounts
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        First 6 weeks
      </td>
      <td>
        £109.80 per week
      </td>
    </tr>
    <tr>
      <td>
        Next 33 weeks
      </td>
      <td>
        £109.80 per week
      </td>
    </tr>
    <tr>
      <td>
        Total estimated pay
      </td>
      <td>
        £4,282.20
      </td>
    </tr>
    <tr>
      <td>
        Tell the mother’s employer
      </td>
      <td>
        28 days before they want to start maternity pay
      </td>
    </tr>
  </tbody>
</table>
table
thead
tr
th colspan="2" Dates and amounts
tbody
tr
td First 6 weeks
td £109.80 per week
tr
td Next 33 weeks
td £109.80 per week
tr
td Total estimated pay
td £4,282.20
tr
td Tell the mother’s employer
td 28 days before they want to start maternity pay