Information

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.

Feature header

A decorative heading block featuring the page title, a summary and an image.

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

If an image is used on a feature header header, the image will stack below the text content of a category header on a mobile device and take up the full screen width.

The image will appear on the right-hand side of a feature header on a desktop, taking up half of the available width of the header.

Other versions of this component

Coloured background

Feature headers may use a coloured background instead of white, with light grey being the default. If you use a coloured background you must ensure that all text on the feature header still meets colour contrast requirements.

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

You can use the wide text version of the component to make the text take two thirds of the available space and make the image take up one third of the space.

This version can be combined with the coloured background version.

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