Component

Published dates

Dates to reflect when content was published and updated

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

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)

Last updated 20th October 2016

<%= render "components/published_dates", {
  last_updated: "20th October 2016"
} %>

With last updated date (preview)

Published 1st January 1990
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

Published 1st January 1990
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.

Published 1st January 1990
Last updated 20th October 2016 + show all updates

1. 1st January 1990

   First published

2. 20th July 1995

   Updated to include information for 1994

3. 14th October 2000

   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.

Published 1st January 1990

<%= render "components/published_dates", {
  published: "1st January 1990",
  margin_bottom: 8
} %>