Component

Metadata

To display relevant metadata about a document

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

• Status: Saved as draft
• Last updated: 12:58pm on 17 August 2018
• Created: 11:02pm on 10 August 2018
• First published on GOV.UK: 12:00pm on 10 August 2018

How to call this component

<%= render "components/metadata", {
  items: [
    {
      field: "Status",
      value: "Saved as draft"
    },
    {
      field: "Last updated",
      value: "12:58pm on 17 August 2018"
    },
    {
      field: "Created",
      value: "11:02pm on 10 August 2018"
    },
    {
      field: "First published on GOV.UK",
      value: "12:00pm on 10 August 2018"
    }
  ]
} %>

Accessibility acceptance criteria

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

Inline (preview)

Metadata can be displayed in a single line per entry

• Alt text: A nice tree
• Markdown code: [Image: file.jpg]

<%= render "components/metadata", {
  items: [
    {
      field: "Alt text",
      value: "A nice tree"
    },
    {
      field: "Markdown code",
      value: "[Image: file.jpg]"
    }
  ],
  inline: true
} %>

With 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. It defaults to a margin bottom of 0.

• Last updated: 12:58pm on 17 August 2018
• Created: 11:02pm on 10 August 2018

<%= render "components/metadata", {
  items: [
    {
      field: "Last updated",
      value: "12:58pm on 17 August 2018"
    },
    {
      field: "Created",
      value: "11:02pm on 10 August 2018"
    }
  ],
  margin_bottom: 3
} %>