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.
How it looks (preview) (preview all)
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
<%= 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"
}
} %>