Skip to main content Skip to main content
Components

Contextual date

Status: Experimental

Added in November 2025. Contributed by Jen Thomson in ‘Sirius (OPG)’.

How to use ‘experimental’ components
Anyone can add an ‘experimental’ status component to the MOJ Design System. They’re early in development and can be used as a starting point. Read about all the Design System statuses.
The contextual date highlights important information about a date in a table.

Contents

A sortable multi-select table. In the 'due date' column are dates in bold, with a status such as 'overdue' written in smaller plain text underneath and a coloured bar to the left to signify the status.

Overview

Use the contextual date component to indicate important information about a date in a table to make it easier to scan, interpret and action where required.

How the component is currently used

The date can be written as DD/MM/YY or DD Month YYYY, depending on the use case of the system.

The label should be short and succinct, ideally no more than 20 characters.

Never use this component without a label - the label provides the context to the visual highlight for accessibility.

To make it accessible use:

  • standard black text
  • bold 19px for the date
  • regular 16px for the context

Make sure the highlight line has:

  • accessible colour contrast
  • distinguishable colours (if you’re using more than one highlight line)

Never use this component without a label - the label provides the context to the visual highlight for accessibility.

Contribute to this component

You can help develop this component by adding information to the ‘contextual date’ Github discussion. This helps other people to use it in their service.

Designs

A Figma link was not included when this component was added.

There may be more information in the ‘contextual date’ Github discussion. You can also view the component image in the overview.

If you have a Figma link for this component (or a component like it) you can add it to Github discussion. This helps other people to use it in their service.

Accessibility

No accessibility findings were included when this component was added. There may be more information in the ‘contextual date’ Github discussion.

Contribute accessibility findings

If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Code

No code was included when this contribution was added.

You can use the ‘contextual date’ Github discussion to:

  • view other code blocks
  • add relevant code