Metadata block
To display relevant metadata about organisations and tags for a document
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"
} %>
Updated with links to see details (preview)
<%= render "govuk_publishing_components/components/metadata", {
last_updated: "10 September 2015",
see_updates_link: true
} %>
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 & Industrial Strategy</a>"),
sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign & 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 & 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 & 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 & 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 & 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>")
} %>
External link (preview)
<%= render "govuk_publishing_components/components/metadata", {
from: sanitize("<a href='/government/organisations/cabinet-office'>Cabinet Office</a>"),
first_published: "14 June 2014",
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 (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 & Industrial Strategy</a>"),
sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign & 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 & 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 & Industrial Strategy</a>"),
sanitize("<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign & 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 & 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
} %>
With title (preview)
<%= render "govuk_publishing_components/components/metadata", {
last_updated: "10 September 2015",
see_updates_link: true,
title: "Title"
} %>
On a dark background with title (preview)
<%= render "govuk_publishing_components/components/metadata", {
inverse: true,
other: {
"Release date": "23 August 2018 9:30am",
"Reason for change": "Date of release brought forward from 23 August 2018 to 21 August 2018 as data in its final form is now available to be published on this new date."
},
title: "The release date has been changed"
} %>