You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Components

Feature header

Published
19 August 2022
A decorative heading block featuring the page title, a summary and an image.
Open this example in a new window

Sample HTML 

<header class="ds_feature-header">
    <div class="ds_feature-header__primary">
        <h1 class="ds_feature-header__title">Design standards</h1>
        <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
    </div>

    <div class="ds_feature-header__secondary">
        <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/category-header-design-standards-svg" />
    </div>
</header>

About this component

A feature header has:

  • a title
  • optional content that describes what’s on the page
  • an optional image

On small screens the image will stack below the text content of a feature header.

On large screens the image appears on the right-hand side of a feature header. It takes up half of the available width of the header.

Other versions of this component

Coloured background

Feature headers can use a coloured background instead of white. Light grey is the default alternative background colour. You must ensure that text on the feature header meets colour contrast requirements.

Open this example in a new window

Sample HTML 

<header class="ds_feature-header  ds_feature-header--background">
    <div class="ds_feature-header__primary">
        <h1 class="ds_feature-header__title">Design standards</h1>
        <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
    </div>

    <div class="ds_feature-header__secondary">
        <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/category-header-design-standards-svg" />
    </div>
</header>

Wide text

The wide text version makes the text area wider and the image area smaller. The text takes up two thirds of the available space, and the image takes up one third.

You can combine this version with the coloured background version.

Open this example in a new window

Sample HTML 

<div class="ds_wrapper">
    <header class="ds_feature-header  ds_feature-header--wide">
        <div class="ds_feature-header__primary">
            <h1 class="ds_feature-header__title">Design standards</h1>
            <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
        </div>

        <div class="ds_feature-header__secondary">
            <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/category-header-design-standards-svg" />
        </div>
    </header>
</div>

Live example

Benefits and grants (mygov.scot)

First Minister (gov.scot)

Arts, culture and sport (gov.scot)

Back to top