1. Government Frontend Component Guide
  2. Published dates

Component

Published dates

Dates to reflect when content was published and updated

How it looks (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

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. First published
  2. Updated to include information for 1994
  3. 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-01T15:42:37.000+00:00"
    },
    {
      display_time: "20th July 1995",
      note: "Updated to include information for 1994",
      timestamp: "1995-07-20T15:42:37.000+00:00"
    },
    {
      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-14T15:42:37.000+00:00"
    }
  ]
} %>