Page header

The header for a content page.

Open this example in a new window

Sample HTML

<header class="ds_page-header">
    <span class="ds_page-header__label  ds_content-label">Guide</span>
    <h1 class="ds_page-header__title">Apply for or renew a disabled parking permit</h1>

    <dl class="ds_page-header__metadata  ds_metadata">
        <div class="ds_metadata__item">
            <dt class="ds_metadata__key">Last updated</dt>
            <dd class="ds_metadata__value">8 November 2016</dd>
        </div>
    </dl>
</header>

About this component

The page header component is used as the heading of a standard content page. It tells users what the page is about.

The page header can include:

  • what type of content page the page is, such as whether it’s a guide or an article

  • data about the content, such as when it was first published or last updated

The content title in the page header must be concise, descriptive and preferably 60 characters or less. It’s used by search engines and social media for indexing purposes. They generally only use the first 60 characters of a title.

Your title should also be tagged with an H1 heading. Using an H1 heading element on the main title of content pages will help your website rank better.

Why we use this component

The page header allows users who reach a page to understand what the content is about, and how current or up to date it is.

Website analytics

Content title H1 headings are used by search engines and are commonly mirrored in the title tag for the page.

Metadata for the content should be available in the dataLayer - this includes dates (published or last updated) and labels.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top