Component

Important metadata

List of document-type specific metadata

A replacement for the metadata component with only the format specific details.

Part of the universal navigation design.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Date of occurrence:
29 November 2013
Aircraft category:
General Aviation
Report type:
Formal Report

How to call this component

<%= render "components/important_metadata", {
  items: {
    "Date of occurrence": "29 November 2013",
    "Aircraft category": sanitize("<a href=\"https://www.gov.uk/aaib-reports?aircraft_category%5B%5D=general-aviation\">General Aviation</a>"),
    "Report type": sanitize("<a href=\"https://www.gov.uk/aaib-reports?report-type%5B%5D=%5B%5D=formal-report\">Formal Report</a>")
  }
} %>

Accessibility acceptance criteria

Important metadata must:

  • have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With multiple items per thing (preview) 

<%= render "components/important_metadata", {
  items: {
    "Many things": [
      sanitize("<a href=\"#\">First thing</a>"),
      sanitize("<a href=\"#\">Second thing</a>"),
      sanitize("<a href=\"#\">Third thing</a>")
    ]
  }
} %>

With title (preview)

Used on statistics announcements to display release date changed information, see example

The release date has been changed

Previous Date:
4 February 2016 9:00pm
Reason for change:
Incorrectly input as 2015 instead of 2016
<%= render "components/important_metadata", {
  title: "The release date has been changed",
  items: {
    "Previous Date": "4 February 2016 9:00pm",
    "Reason for change": "Incorrectly input as 2015 instead of 2016"
  }
} %>