Page metadata

<dl class="ds_metadata">
    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Published</dt>
        <dd class="ds_metadata__value">16 April 2024</dd>
    </div>

    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Directorate</dt>
        <dd class="ds_metadata__value">
            <a href="#">Equality, Inclusion and Human Rights Directorate</a>
        </dd>
    </div>

    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Part of</dt>
        <dd class="ds_metadata__value">
            <a href="#">Equality and rights</a>,
            <a href="#">Law and order</a>
        </dd>
    </div>
</dl>

About this component

The page metadata component shows important information about a piece of content, such as:

• the publication date
• the content type or format
• who published the content – for example, the name of the department
• categories or topics
• an International Standard Book Number (ISBN)
• a reference number

When to use this component

Use the page metadata component to show information that’s useful to users.

For example, you can show:

• the date that a page was last updated to reassure the user that the content is up to date
• the organisation responsible for the content so users understand where the information has come from

How to use this component

Only include information in page metadata that’s useful to users.

Page metadata can contain links.

There are 2 versions of the page metadata component – a standard version and a shortened version.

Standard page metadata 

<dl class="ds_metadata">
    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Published</dt>
        <dd class="ds_metadata__value">16 April 2024</dd>
    </div>

    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Directorate</dt>
        <dd class="ds_metadata__value">
            <a href="#">Equality, Inclusion and Human Rights Directorate</a>
        </dd>
    </div>

    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Part of</dt>
        <dd class="ds_metadata__value">
            <a href="#">Equality and rights</a>,
            <a href="#">Law and order</a>
        </dd>
    </div>
</dl>

Use this version on a standard content page.

This version is usually included in the page header component. The page metadata is displayed underneath the title.

Shortened page metadata

<dl class="ds_metadata  ds_metadata--inline">
    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Type</dt>
        <dd class="ds_metadata__value">Advice and guidance</dd>
    </div>

    <div class="ds_metadata__item">
        <dt class="ds_metadata__key">Date</dt>
        <dd class="ds_metadata__value">22 April 2024</dd>
    </div>
</dl>

Use the shortened version when using the page metadata component within other components. For example, within search results or cards.

This uses the same HTML structure as the standard version. However, it:

• displays the page metadata on a single line
• hides the titles of each data item – screen readers will read the titles to help users of assistive technology understand what the items of data refer to

Only show one or 2 pieces of information when using the shortened version. This should be the information that’s most important for users.

The shortened version is used in the:

• file download component
• search results pattern

Evidence

The page metadata component was tested as part of the search results pattern testing.

The component performed well. Page metadata helped users identify the most useful search results.

Related components

• page header component
• file download component
• search results pattern

Website analytics

To understand user behaviour, clicks on links in this component can be tracked through the click URL, the click text and a data attribute showing the interaction.

The Design System’s ‘tracking’ script adds the data attributes.