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.

Component

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="/assets/images/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.

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="/assets/images/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.

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="/assets/images/examples/category-header-design-standards.svg" />
        </div>
    </header>
</div>

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