1. Collections Component Guide
  2. Metadata block
Component

Metadata block

To display relevant metadata about organisations and tags for a document

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/metadata", {
  from: sanitize("<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>")
} %>

Accessibility acceptance criteria

The metadata component must:

  • indicate that any expandable content can be expanded or collapsed
  • indicate the initial state of expandable content
  • indicate where the state of expandable content has changed

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

Part of only (preview)

<%= render "govuk_publishing_components/components/metadata", {
  part_of: sanitize("<a href='/government/topics/environment'>Environment</a>")
} %>

History only (preview)

<%= render "govuk_publishing_components/components/metadata", {
  history: "Updated 2 weeks ago"
} %>

Published and updated (preview)

<%= render "govuk_publishing_components/components/metadata", {
  first_published: "14 June 2014",
  last_updated: "10 September 2015"
} %>

Extensive (preview)

<%= render "govuk_publishing_components/components/metadata", {
  from: [
    sanitize("<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>"),
    sanitize("<a href='/government/organisations/cabinet-office'>Cabinet Office</a>"),
    sanitize("<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>"),
    sanitize("<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>"),
    sanitize("<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>"),
    sanitize("<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>")
  ],
  history: "Updated 2 weeks ago",
  part_of: [
    sanitize("<a href='/government/topics/energy'>Energy</a>"),
    sanitize("<a href='/government/topics/environment'>Environment</a>")
  ],
  other: {
    "Related topics": [
      sanitize("<a href='/government/topics/arts-and-culture'>Arts and culture</a>"),
      sanitize("<a href='/government/topics/sports-and-leisure'>Sports and leisure</a>")
    ],
    "Applies to": "England"
  }
} %>

Extensive specialist document (preview)

<%= render "govuk_publishing_components/components/metadata", {
  from: [
    sanitize("<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>")
  ],
  published: null,
  other: {
    "Type of support": [
      sanitize("<a href=\"/business-finance-support?types_of_support%5B%5D=finance\">Finance</a>"),
      sanitize("<a href=\"/business-finance-support?types_of_support%5B%5D=equity\">Equity</a>"),
      sanitize("<a href=\"/business-finance-support?types_of_support%5B%5D=grant\">Grant</a>"),
      sanitize("<a href=\"/business-finance-support?types_of_support%5B%5D=expertise-and-advice\">Expertise and advice</a>")
    ],
    "Business stage": [
      sanitize("<a href=\"/business-finance-support?business_stages%5B%5D=not-yet-trading\">Not yet trading</a>"),
      sanitize("<a href=\"/business-finance-support?business_stages%5B%5D=start-up\">Start-ups (1-2 years trading)</a>"),
      sanitize("<a href=\"/business-finance-support?business_stages%5B%5D=established\">Established</a>")
    ],
    Industry: [
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=agriculture-and-food\">Agriculture and food</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=business-and-finance\">Business and finance</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=construction\">Construction</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=education\">Education</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=health\">Health</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=hospitality-and-catering\">Hospitality and catering</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=information-technology-digital-and-creative\">IT, digital and creative</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=manufacturing\">Manufacturing</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=mining\">Mining</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=real-estate-and-property\">Real estate and property</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=science-and-technology\">Science and technology</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=service-industries\">Service industries</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=transport-and-distribution\">Transport and distribution</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=travel-and-leisure\">Travel and leisure</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=utilities-providers\">Utilities providers</a>"),
      sanitize("<a href=\"/business-finance-support?industries%5B%5D=wholesale-and-retail\">Wholesale and retail</a>")
    ],
    "Number of employees": [
      sanitize("<a href=\"/business-finance-support?business_sizes%5B%5D=under-10\">0 to 9 employees</a>"),
      sanitize("<a href=\"/business-finance-support?business_sizes%5B%5D=between-10-and-249\">10 to 249 employees</a>"),
      sanitize("<a href=\"/business-finance-support?business_sizes%5B%5D=between-250-and-500\">250 to 500 employees</a>"),
      sanitize("<a href=\"/business-finance-support?business_sizes%5B%5D=over-500\">More than 500 employees</a>")
    ]
  }
} %>

Extensive country list (preview)

<%= render "govuk_publishing_components/components/metadata", {
  from: [
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>"),
    sanitize("<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>")
  ],
  part_of: [
    sanitize("<a href=\"/government/world/afghanistan\">Afghanistan</a>"),
    sanitize("<a href=\"/government/world/albania\">Albania</a>"),
    sanitize("<a href=\"/government/world/algeria\">Algeria</a>"),
    sanitize("<a href=\"/government/world/angola\">Angola</a>"),
    sanitize("<a href=\"/government/world/anguilla\">Anguilla</a>"),
    sanitize("<a href=\"/government/world/argentina\">Argentina</a>"),
    sanitize("<a href=\"/government/world/armenia\">Armenia</a>"),
    sanitize("<a href=\"/government/world/australia\">Australia</a>"),
    sanitize("<a href=\"/government/world/austria\">Austria</a>"),
    sanitize("<a href=\"/government/world/azerbaijan\">Azerbaijan</a>"),
    sanitize("<a href=\"/government/world/bahrain\">Bahrain</a>"),
    sanitize("<a href=\"/government/world/bangladesh\">Bangladesh</a>"),
    sanitize("<a href=\"/government/world/barbados\">Barbados</a>"),
    sanitize("<a href=\"/government/world/belarus\">Belarus</a>"),
    sanitize("<a href=\"/government/world/belgium\">Belgium</a>"),
    sanitize("<a href=\"/government/world/belize\">Belize</a>"),
    sanitize("<a href=\"/government/world/bolivia\">Bolivia</a>"),
    sanitize("<a href=\"/government/world/bosnia-and-herzegovina\">Bosnia and Herzegovina</a>"),
    sanitize("<a href=\"/government/world/botswana\">Botswana</a>"),
    sanitize("<a href=\"/government/world/brazil\">Brazil</a>"),
    sanitize("<a href=\"/government/world/british-antarctic-territory\">British Antarctic Territory</a>"),
    sanitize("<a href=\"/government/world/british-virgin-islands\">British Virgin Islands</a>"),
    sanitize("<a href=\"/government/world/brunei\">Brunei</a>"),
    sanitize("<a href=\"/government/world/bulgaria\">Bulgaria</a>"),
    sanitize("<a href=\"/government/world/burma\">Burma</a>"),
    sanitize("<a href=\"/government/world/cambodia\">Cambodia</a>"),
    sanitize("<a href=\"/government/world/cameroon\">Cameroon</a>"),
    sanitize("<a href=\"/government/world/canada\">Canada</a>"),
    sanitize("<a href=\"/government/world/cayman-islands\">Cayman Islands</a>"),
    sanitize("<a href=\"/government/world/chile\">Chile</a>"),
    sanitize("<a href=\"/government/world/china\">China</a>"),
    sanitize("<a href=\"/government/world/colombia\">Colombia</a>"),
    sanitize("<a href=\"/government/world/costa-rica\">Costa Rica</a>"),
    sanitize("<a href=\"/government/world/croatia\">Croatia</a>"),
    sanitize("<a href=\"/government/world/cuba\">Cuba</a>"),
    sanitize("<a href=\"/government/world/cyprus\">Cyprus</a>"),
    sanitize("<a href=\"/government/world/czech-republic\">Czech Republic</a>"),
    sanitize("<a href=\"/government/world/democratic-republic-of-congo\">Democratic Republic of Congo</a>"),
    sanitize("<a href=\"/government/world/denmark\">Denmark</a>"),
    sanitize("<a href=\"/government/world/dominican-republic\">Dominican Republic</a>"),
    sanitize("<a href=\"/government/world/ecuador\">Ecuador</a>"),
    sanitize("<a href=\"/government/world/egypt\">Egypt</a>"),
    sanitize("<a href=\"/government/world/eritrea\">Eritrea</a>"),
    sanitize("<a href=\"/government/world/estonia\">Estonia</a>"),
    sanitize("<a href=\"/government/world/ethiopia\">Ethiopia</a>"),
    sanitize("<a href=\"/government/world/fiji\">Fiji</a>"),
    sanitize("<a href=\"/government/world/finland\">Finland</a>"),
    sanitize("<a href=\"/government/world/france\">France</a>"),
    sanitize("<a href=\"/government/world/gambia\">Gambia</a>"),
    sanitize("<a href=\"/government/world/georgia\">Georgia</a>"),
    sanitize("<a href=\"/government/world/germany\">Germany</a>"),
    sanitize("<a href=\"/government/world/ghana\">Ghana</a>"),
    sanitize("<a href=\"/government/world/greece\">Greece</a>"),
    sanitize("<a href=\"/government/world/guatemala\">Guatemala</a>"),
    sanitize("<a href=\"/government/world/guyana\">Guyana</a>"),
    sanitize("<a href=\"/government/world/holy-see\">Holy See</a>"),
    sanitize("<a href=\"/government/world/honduras\">Honduras</a>"),
    sanitize("<a href=\"/government/world/hong-kong\">Hong Kong</a>"),
    sanitize("<a href=\"/government/world/hungary\">Hungary</a>"),
    sanitize("<a href=\"/government/world/iceland\">Iceland</a>"),
    sanitize("<a href=\"/government/world/india\">India</a>"),
    sanitize("<a href=\"/government/world/indonesia\">Indonesia</a>"),
    sanitize("<a href=\"/government/world/iran\">Iran</a>"),
    sanitize("<a href=\"/government/world/iraq\">Iraq</a>"),
    sanitize("<a href=\"/government/world/ireland\">Ireland</a>"),
    sanitize("<a href=\"/government/world/israel\">Israel</a>"),
    sanitize("<a href=\"/government/world/italy\">Italy</a>"),
    sanitize("<a href=\"/government/world/jamaica\">Jamaica</a>"),
    sanitize("<a href=\"/government/world/japan\">Japan</a>"),
    sanitize("<a href=\"/government/world/jordan\">Jordan</a>"),
    sanitize("<a href=\"/government/world/kazakhstan\">Kazakhstan</a>"),
    sanitize("<a href=\"/government/world/kenya\">Kenya</a>"),
    sanitize("<a href=\"/government/world/kosovo\">Kosovo</a>"),
    sanitize("<a href=\"/government/world/kuwait\">Kuwait</a>"),
    sanitize("<a href=\"/government/world/laos\">Laos</a>"),
    sanitize("<a href=\"/government/world/latvia\">Latvia</a>"),
    sanitize("<a href=\"/government/world/lebanon\">Lebanon</a>"),
    sanitize("<a href=\"/government/world/libya\">Libya</a>"),
    sanitize("<a href=\"/government/world/lithuania\">Lithuania</a>"),
    sanitize("<a href=\"/government/world/luxembourg\">Luxembourg</a>"),
    sanitize("<a href=\"/government/world/macedonia\">Macedonia</a>"),
    sanitize("<a href=\"/government/world/madagascar\">Madagascar</a>"),
    sanitize("<a href=\"/government/world/malawi\">Malawi</a>"),
    sanitize("<a href=\"/government/world/malaysia\">Malaysia</a>"),
    sanitize("<a href=\"/government/world/maldives\">Maldives</a>"),
    sanitize("<a href=\"/government/world/mali\">Mali</a>"),
    sanitize("<a href=\"/government/world/malta\">Malta</a>"),
    sanitize("<a href=\"/government/world/mauritius\">Mauritius</a>"),
    sanitize("<a href=\"/government/world/mexico\">Mexico</a>"),
    sanitize("<a href=\"/government/world/moldova\">Moldova</a>"),
    sanitize("<a href=\"/government/world/mongolia\">Mongolia</a>"),
    sanitize("<a href=\"/government/world/montenegro\">Montenegro</a>"),
    sanitize("<a href=\"/government/world/montserrat\">Montserrat</a>"),
    sanitize("<a href=\"/government/world/morocco\">Morocco</a>"),
    sanitize("<a href=\"/government/world/mozambique\">Mozambique</a>"),
    sanitize("<a href=\"/government/world/namibia\">Namibia</a>"),
    sanitize("<a href=\"/government/world/nepal\">Nepal</a>"),
    sanitize("<a href=\"/government/world/netherlands\">Netherlands</a>"),
    sanitize("<a href=\"/government/world/new-zealand\">New Zealand</a>"),
    sanitize("<a href=\"/government/world/nigeria\">Nigeria</a>"),
    sanitize("<a href=\"/government/world/north-korea\">North Korea</a>"),
    sanitize("<a href=\"/government/world/norway\">Norway</a>"),
    sanitize("<a href=\"/government/world/oman\">Oman</a>"),
    sanitize("<a href=\"/government/world/pakistan\">Pakistan</a>"),
    sanitize("<a href=\"/government/world/panama\">Panama</a>"),
    sanitize("<a href=\"/government/world/papua-new-guinea\">Papua New Guinea</a>"),
    sanitize("<a href=\"/government/world/peru\">Peru</a>"),
    sanitize("<a href=\"/government/world/philippines\">Philippines</a>"),
    sanitize("<a href=\"/government/world/poland\">Poland</a>"),
    sanitize("<a href=\"/government/world/portugal\">Portugal</a>"),
    sanitize("<a href=\"/government/world/qatar\">Qatar</a>"),
    sanitize("<a href=\"/government/world/romania\">Romania</a>"),
    sanitize("<a href=\"/government/world/russia\">Russia</a>"),
    sanitize("<a href=\"/government/world/rwanda\">Rwanda</a>"),
    sanitize("<a href=\"/government/world/saudi-arabia\">Saudi Arabia</a>"),
    sanitize("<a href=\"/government/world/senegal\">Senegal</a>"),
    sanitize("<a href=\"/government/world/serbia\">Serbia</a>"),
    sanitize("<a href=\"/government/world/seychelles\">Seychelles</a>"),
    sanitize("<a href=\"/government/world/sierra-leone\">Sierra Leone</a>"),
    sanitize("<a href=\"/government/world/singapore\">Singapore</a>"),
    sanitize("<a href=\"/government/world/slovakia\">Slovakia</a>"),
    sanitize("<a href=\"/government/world/slovenia\">Slovenia</a>"),
    sanitize("<a href=\"/government/world/solomon-islands\">Solomon Islands</a>"),
    sanitize("<a href=\"/government/world/somalia\">Somalia</a>"),
    sanitize("<a href=\"/government/world/south-africa\">South Africa</a>"),
    sanitize("<a href=\"/government/world/south-korea\">South Korea</a>"),
    sanitize("<a href=\"/government/world/south-sudan\">South Sudan</a>"),
    sanitize("<a href=\"/government/world/spain\">Spain</a>"),
    sanitize("<a href=\"/government/world/sri-lanka\">Sri Lanka</a>"),
    sanitize("<a href=\"/government/world/sudan\">Sudan</a>"),
    sanitize("<a href=\"/government/world/sweden\">Sweden</a>"),
    sanitize("<a href=\"/government/world/switzerland\">Switzerland</a>"),
    sanitize("<a href=\"/government/world/syria\">Syria</a>"),
    sanitize("<a href=\"/government/world/taiwan\">Taiwan</a>"),
    sanitize("<a href=\"/government/world/tajikistan\">Tajikistan</a>"),
    sanitize("<a href=\"/government/world/tanzania\">Tanzania</a>"),
    sanitize("<a href=\"/government/world/thailand\">Thailand</a>"),
    sanitize("<a href=\"/government/world/timor-leste\">Timor Leste</a>"),
    sanitize("<a href=\"/government/world/trinidad-and-tobago\">Trinidad and Tobago</a>"),
    sanitize("<a href=\"/government/world/tunisia\">Tunisia</a>"),
    sanitize("<a href=\"/government/world/turkey\">Turkey</a>"),
    sanitize("<a href=\"/government/world/turkmenistan\">Turkmenistan</a>"),
    sanitize("<a href=\"/government/world/turks-and-caicos-islands\">Turks and Caicos Islands</a>"),
    sanitize("<a href=\"/government/world/uganda\">Uganda</a>"),
    sanitize("<a href=\"/government/world/uk-delegation-to-council-of-europe\">UK Delegation to Council of Europe</a>"),
    sanitize("<a href=\"/government/world/uk-delegation-to-organization-for-security-and-co-operation-in-europe\">UK Delegation to Organization for Security and Co-operation in Europe</a>"),
    sanitize("<a href=\"/government/world/uk-joint-delegation-to-nato\">UK Joint Delegation to NATO</a>"),
    sanitize("<a href=\"/government/world/uk-mission-to-the-un-geneva\">UK Mission to the UN Geneva</a>"),
    sanitize("<a href=\"/government/world/uk-mission-to-the-united-nations\">UK Mission to the United Nations</a>"),
    sanitize("<a href=\"/government/world/uk-representation-to-the-eu\">UK Representation to the EU</a>"),
    sanitize("<a href=\"/government/world/ukraine\">Ukraine</a>"),
    sanitize("<a href=\"/government/world/united-arab-emirates\">United Arab Emirates</a>"),
    sanitize("<a href=\"/government/world/uruguay\">Uruguay</a>"),
    sanitize("<a href=\"/government/world/usa\">USA</a>"),
    sanitize("<a href=\"/government/world/uzbekistan\">Uzbekistan</a>"),
    sanitize("<a href=\"/government/world/venezuela\">Venezuela</a>"),
    sanitize("<a href=\"/government/world/zambia\">Zambia</a>"),
    sanitize("<a href=\"/government/world/zimbabwe\">Zimbabwe</a>"),
    sanitize("<a href=\"/government/world/andorra\">Andorra</a>"),
    sanitize("<a href=\"/government/world/antigua-and-barbuda\">Antigua and Barbuda</a>"),
    sanitize("<a href=\"/government/world/bahamas\">Bahamas</a>"),
    sanitize("<a href=\"/government/world/benin\">Benin</a>"),
    sanitize("<a href=\"/government/world/bhutan\">Bhutan</a>"),
    sanitize("<a href=\"/government/world/burkina-faso\">Burkina Faso</a>"),
    sanitize("<a href=\"/government/world/cape-verde\">Cape Verde</a>"),
    sanitize("<a href=\"/government/world/comoros\">Comoros</a>"),
    sanitize("<a href=\"/government/world/congo\">Congo</a>"),
    sanitize("<a href=\"/government/world/cote-d-ivoire\">Cote d’Ivoire</a>"),
    sanitize("<a href=\"/government/world/djibouti\">Djibouti</a>"),
    sanitize("<a href=\"/government/world/dominica\">Dominica</a>"),
    sanitize("<a href=\"/government/world/equatorial-guinea\">Equatorial Guinea</a>"),
    sanitize("<a href=\"/government/world/grenada\">Grenada</a>"),
    sanitize("<a href=\"/government/world/guinea-bissau\">Guinea-Bissau</a>"),
    sanitize("<a href=\"/government/world/haiti\">Haiti</a>"),
    sanitize("<a href=\"/government/world/kiribati\">Kiribati</a>"),
    sanitize("<a href=\"/government/world/lesotho\">Lesotho</a>"),
    sanitize("<a href=\"/government/world/liberia\">Liberia</a>"),
    sanitize("<a href=\"/government/world/liechtenstein\">Liechtenstein</a>"),
    sanitize("<a href=\"/government/world/macao\">Macao</a>"),
    sanitize("<a href=\"/government/world/marshall-islands\">Marshall Islands</a>"),
    sanitize("<a href=\"/government/world/micronesia\">Micronesia</a>"),
    sanitize("<a href=\"/government/world/nauru\">Nauru</a>"),
    sanitize("<a href=\"/government/world/nicaragua\">Nicaragua</a>"),
    sanitize("<a href=\"/government/world/niger\">Niger</a>"),
    sanitize("<a href=\"/government/world/the-occupied-palestinian-territories\">The Occupied Palestinian Territories</a>"),
    sanitize("<a href=\"/government/world/palau\">Palau</a>"),
    sanitize("<a href=\"/government/world/paraguay\">Paraguay</a>"),
    sanitize("<a href=\"/government/world/samoa\">Samoa</a>"),
    sanitize("<a href=\"/government/world/sao-tome-and-principe\">São Tomé and Principe</a>"),
    sanitize("<a href=\"/government/world/st-kitts-and-nevis\">St Kitts and Nevis</a>"),
    sanitize("<a href=\"/government/world/st-vincent-and-the-grenadines\">St Vincent and The Grenadines</a>"),
    sanitize("<a href=\"/government/world/suriname\">Suriname</a>"),
    sanitize("<a href=\"/government/world/swaziland\">Swaziland</a>"),
    sanitize("<a href=\"/government/world/togo\">Togo</a>"),
    sanitize("<a href=\"/government/world/tuvalu\">Tuvalu</a>"),
    sanitize("<a href=\"/government/world/vanuatu\">Vanuatu</a>"),
    sanitize("<a href=\"/government/world/united-kingdom\">United Kingdom</a>"),
    sanitize("<a href=\"/government/world/bermuda\">Bermuda</a>"),
    sanitize("<a href=\"/government/world/burundi\">Burundi</a>"),
    sanitize("<a href=\"/government/world/el-salvador\">El Salvador</a>"),
    sanitize("<a href=\"/government/world/falkland-islands\">Falkland Islands</a>"),
    sanitize("<a href=\"/government/world/guinea\">Guinea</a>"),
    sanitize("<a href=\"/government/world/uk-mission-to-the-united-nations-new-york\">UK Mission to the United Nations, New York</a>"),
    sanitize("<a href=\"/government/world/the-uk-permanent-delegation-to-the-oecd-organisation-for-economic-co-operation-and-development\">The UK Permanent Delegation to the OECD (Organisation for Economic Co-operation and Development)</a>"),
    sanitize("<a href=\"/government/world/st-helena-ascension-and-tristan-da-cunha\">St Helena, Ascension and Tristan da Cunha</a>"),
    sanitize("<a href=\"/government/world/st-lucia\">St Lucia</a>"),
    sanitize("<a href=\"/government/world/kyrgyzstan\">Kyrgyzstan</a>"),
    sanitize("<a href=\"/government/world/pitcairn-island\">Pitcairn Island</a>"),
    sanitize("<a href=\"/government/world/chad\">Chad</a>"),
    sanitize("<a href=\"/government/world/mauritania\">Mauritania</a>"),
    sanitize("<a href=\"/government/world/american-samoa\">American Samoa</a>"),
    sanitize("<a href=\"/government/world/aruba\">Aruba</a>"),
    sanitize("<a href=\"/government/world/bonaire-st-eustatius-saba\">Bonaire/St Eustatius/Saba</a>"),
    sanitize("<a href=\"/government/world/british-indian-ocean-territory\">British Indian Ocean Territory</a>"),
    sanitize("<a href=\"/government/world/central-african-republic\">Central African Republic</a>"),
    sanitize("<a href=\"/government/world/curacao\">Curaçao</a>"),
    sanitize("<a href=\"/government/world/french-guiana\">French Guiana</a>"),
    sanitize("<a href=\"/government/world/french-polynesia\">French Polynesia</a>"),
    sanitize("<a href=\"/government/world/gabon\">Gabon</a>"),
    sanitize("<a href=\"/government/world/gibraltar\">Gibraltar</a>"),
    sanitize("<a href=\"/government/world/guadeloupe\">Guadeloupe</a>"),
    sanitize("<a href=\"/government/world/martinique\">Martinique</a>"),
    sanitize("<a href=\"/government/world/mayotte\">Mayotte</a>"),
    sanitize("<a href=\"/government/world/monaco\">Monaco</a>"),
    sanitize("<a href=\"/government/world/new-caledonia\">New Caledonia</a>"),
    sanitize("<a href=\"/government/world/reunion\">Réunion</a>"),
    sanitize("<a href=\"/government/world/san-marino\">San Marino</a>"),
    sanitize("<a href=\"/government/world/south-georgia-and-south-sandwich-islands\">South Georgia and the South Sandwich Islands</a>"),
    sanitize("<a href=\"/government/world/st-maarten\">St Maarten</a>"),
    sanitize("<a href=\"/government/world/st-pierre-and-miquelon\">St Pierre &amp; Miquelon</a>"),
    sanitize("<a href=\"/government/world/tonga\">Tonga</a>"),
    sanitize("<a href=\"/government/world/wallis-and-futuna\">Wallis and Futuna</a>")
  ],
  first_published: "5 December 2013"
} %>

Basic rtl (preview)

<%= render "govuk_publishing_components/components/metadata", {
  direction: "rtl",
  from: sanitize("<a href='/government/organisations/cabinet-office'>Cabinet Office</a>"),
  history: "Updated 2 weeks ago",
  part_of: sanitize("<a href='/government/topics/environment'>Environment</a>")
} %>

On a dark background (preview)

<%= render "govuk_publishing_components/components/metadata", {
  inverse: true,
  from: [
    sanitize("<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>"),
    sanitize("<a href='/government/organisations/cabinet-office'>Cabinet Office</a>"),
    sanitize("<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>"),
    sanitize("<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>"),
    sanitize("<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>"),
    sanitize("<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>")
  ],
  first_published: "14 June 2014",
  last_updated: "10 September 2015",
  see_updates_link: true,
  other: {
    "Applies to": sanitize("England, Scotland, and Wales (see detailed guidance for <a href=\"http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for\" rel=\"external\">Northern Ireland</a>)")
  }
} %>

On a dark background without padding (preview)

By default the inverse option includes extra spacing around the component. This option removes this padding. Note that both the inverse and inverse_compress options must be supplied.

<%= render "govuk_publishing_components/components/metadata", {
  inverse: true,
  inverse_compress: true,
  from: [
    sanitize("<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>"),
    sanitize("<a href='/government/organisations/cabinet-office'>Cabinet Office</a>"),
    sanitize("<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>"),
    sanitize("<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>"),
    sanitize("<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>"),
    sanitize("<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>"),
    sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>")
  ],
  first_published: "14 June 2014",
  last_updated: "10 September 2015",
  see_updates_link: true,
  other: {
    "Applies to": sanitize("England, Scotland, and Wales (see detailed guidance for <a href=\"http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for\" rel=\"external\">Northern Ireland</a>)")
  }
} %>

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. It defaults to the margin-bottom values defined in the responsive-bottom-margin mixin

<%= render "govuk_publishing_components/components/metadata", {
  first_published: "14 June 2014",
  last_updated: "10 September 2015",
  margin_bottom: 2
} %>

Without ga4 tracking (preview)

Disables the GA4 link tracker on the ‘See all updates’ link. Tracking is enabled by default.

<%= render "govuk_publishing_components/components/metadata", {
  last_updated: "10 September 2015",
  see_updates_link: true,
  disable_ga4: true
} %>