Metadata

The metadata component is a way to organise and explain a block of key-value pairs of related information.

Example: Example Metadata contents

Nunjucks
Nunjucks macro options
HTML

Nunjucks

{% from "components/metadata/_macro.njk" import onsMetadata %}
{{
    onsMetadata({
        "classes": "ons-u-mb-no",
        "metadataLabel": "Information about this business and its survey requirements",
        "termCol": "2",
        "descriptionCol": "10",
        "itemsList": [
            {
                "term": "Survey:",
                "descriptions": [
                    {
                        "description": "Bricks & Blocks"
                    }
                ]
            },
            {
                "term": "RU Refs:",
                "descriptions": [
                    {
                        "description": "49900000118"
                    },
                    {
                        "description": "49300005832"
                    }
                ]
            },
            {
                "term": "Business:",
                "descriptions": [
                    {
                        "description": "Bolts & Ratchets Ltd."
                    }
                ]
            },
            {
                "term": "Trading as:",
                "descriptions": [
                    {
                        "description": "Bolts & Ratchets"
                    }
                ]
            },
            {
                "term": "To:",
                "descriptions": [
                    {
                        "description": "Jacky Turner"
                    },
                    {
                        "description": "Louise Goodland"
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
id	string	false	The HTML `id` for the metadata description list (`<dl>`)
classes	string	false	Classes to apply to metadata description list (`<dl>`)
metadataLabel	string	false	Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list
termCol	number	true	The number of grid columns used for the `<dt>` elements above medium breakpoint
descriptionCol	number	true	The number of grid columns used for the `<dd>` elements above medium breakpoint
itemsList	array`<Item>`	true	Settings for the terms and descriptions of the description list items

Item

Name	Type	Required	Description
term	string	true	The value of the description term
descriptions	array`<Description>`	true	Settings for each description item

Description

Name	Type	Required	Description
id	string	false	The HTML `id` for the description of the related term
description	string	true	The value of the description of the related term

HTML

<dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf ons-u-mb-no"
  title="Information about this business and its survey requirements"
  aria-label="Information about this business and its survey requirements">
  <dt class="ons-metadata__term ons-grid__col ons-col-2@m">Survey:</dt>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">Bricks &amp; Blocks</dd>
  <dt class="ons-metadata__term ons-grid__col ons-col-2@m">RU Refs:</dt>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">49900000118</dd>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">49300005832</dd>
  <dt class="ons-metadata__term ons-grid__col ons-col-2@m">Business:</dt>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">Bolts &amp; Ratchets Ltd.</dd>
  <dt class="ons-metadata__term ons-grid__col ons-col-2@m">Trading as:</dt>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">Bolts &amp; Ratchets</dd>
  <dt class="ons-metadata__term ons-grid__col ons-col-2@m">To:</dt>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">Jacky Turner</dd>
  <dd class="ons-metadata__value ons-grid__col ons-col-10@m">Louise Goodland</dd>
</dl>

When to use this component

Use the metadata component when you need to display a group of properties and their associated values for an object, product or system. For example, a product's specification.

How to use this component

A description list (<dl>) is used to divide the metadata information into terms (<dt>) and descriptions (<dd>).

Use the grid system to build the layout of two columns of metadata, setting the number of columns (.ons-col-<n>@m) to ensure the terms display on a single line where possible.

Use the metadataLabel to succinctly describe the description list.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Metadata’ component on GitHub (opens in a new tab)

Cookies on ons.gov.uk

BETA