Component
Published dates
Dates to reflect when content was published and updated
How it looks (preview) (preview all)
Updates to this page
Published 1st January 1990
How to call this component
<%= render "components/published_dates", {
published: "1st January 1990"
} %>
Accessibility acceptance criteria
The published dates component must:
- indicate to users that the full history section can be expanded and collapsed
- inform the user of the state of the full history section (expanded or collapsed)
- be usable with a keyboard
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
Just last updated date (preview)
Updates to this page
Last updated 20th October 2016
<%= render "components/published_dates", {
last_updated: "20th October 2016"
} %>
With last updated date (preview)
Updates to this page
Published 1st January 1990
Last updated 20th October 2016
Last updated 20th October 2016
<%= render "components/published_dates", {
published: "1st January 1990",
last_updated: "20th October 2016"
} %>
Link to page history (preview)
This will set up a link to a ‘#history’ anchor on the page. This can be used to link to another instance of this component, see Display Page History example
Updates to this page
Published 1st January 1990
Last updated 20th October 2016 — See all updates
Last updated 20th October 2016 — See all updates
<%= render "components/published_dates", {
published: "1st January 1990",
last_updated: "20th October 2016",
link_to_history: true
} %>
Display page history (preview)
This will set up an expandable section on the page, with a top border, to let users toggle the display of the page history.
Updates to this page
Published 1st January 1990
Last updated 20th October 2016 + show all updates
Last updated 20th October 2016 + show all updates
-
First published
-
Updated to include information for 1994
-
Updated information on pupil premium reviews and what information schools need to publish on their websites.
<%= render "components/published_dates", {
published: "1st January 1990",
last_updated: "20th October 2016",
history: [
{
display_time: "1st January 1990",
note: "First published",
timestamp: "1990-01-01 15:42:37 +0000"
},
{
display_time: "20th July 1995",
note: "Updated to include information for 1994",
timestamp: "1995-07-20 15:42:37 +0000"
},
{
display_time: "14th October 2000",
note: "Updated information on pupil premium reviews and what information schools need to publish on their websites.",
timestamp: "2000-10-14 15:42:37 +0000"
}
]
} %>
With custom margin bottom (preview)
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. By default, the component does not have a bottom margin.
Updates to this page
Published 1st January 1990
<%= render "components/published_dates", {
published: "1st January 1990",
margin_bottom: 8
} %>