Feature header

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

Sample HTML for Feature header example

<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

The default feature header has:

  • a title
  • optional content that describes what’s on the page
  • an optional image – follow the Design System images guidance

Image placement

In the default feature header, the image is stacked below the text content on small screens.

On large screens the image appears on the right-hand side. It takes up half of the available width of the header. The title and content are vertically centred against the image.

Other versions of this component

You can use other versions of this component:

  • a coloured background instead of white
  • a full width background
  • wide text
  • changing the scale or aspect ratio of the image 
  • text and image top-aligned

Coloured background

You can add a coloured background by using one of the following modifier CSS classes:

  • ds_feature-header—backgroud-secondary uses the secondary background colour
  • ds_feature-header—background-tertiary uses the tertiary background colour
  • ds_feature-header—background uses the colour specified by the $feature-header-background Sass variable, which defaults to the defined brand colour but can be overwritten

You must ensure that text meets colour contrast requirements against the background colour. Check contrast with the webAIM colour contrast checker.

Sample HTML for Feature header example with coloured background

<header class="ds_feature-header  ds_feature-header--background-tertiary">
    <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>

Full width background

The full width version takes up the full width of the screen with any applied background colour stretching across this.

Sample HTML for Feature header example with full width background

<header class="ds_feature-header  ds_feature-header--background  ds_feature-header--fullwidth">
    <div class="ds_wrapper">
        <div class="ds_feature-header__primary">
            <h1 class="ds_feature-header__title">Scottish agriculture</h1>
            <p>Ensuring a thriving agriculture sector for Scotland's farmers, crofters and growers.</p>
        </div>
        <div class="ds_feature-header__secondary">
            <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/highland-cow-jpg"/>
        </div>
    </div>
</header>

Full width with padding removed

There’s padding above and below the optional image on large screens. You can remove this by adding the modifier class ds_feature-header__secondary--no-padding

Sample HTML for Feature header example with full width background and no vertical padding on image

<header class="ds_feature-header  ds_feature-header--background-tertiary  ds_feature-header--fullwidth">
    <div class="ds_wrapper">
        <div class="ds_feature-header__primary">
            <h1 class="ds_feature-header__title">Scottish agriculture</h1>
        </div>
        <div class="ds_feature-header__secondary  ds_feature-header__secondary--no-padding">
            <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/highland-cow-jpg"/>
        </div>
    </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 other versions.

Sample HTML for Feature header example with wide text

<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>

Change image appearance

You can change how the image appears in a feature header.

Fit to scale

On large screens, you can set the image scale to fit the available area by adding the modifier class ds_feature-header__secondary-cover

Sample HTML for Feature header example with cover image

<header class="ds_feature-header  ds_feature-header--background-tertiary">
    <div class="ds_feature-header__primary">
        <h1 class="ds_feature-header__title">Scottish agriculture</h1>
        <p>Ensuring a thriving agriculture sector for Scotland's farmers, crofters and growers.</p>
    </div>
    <div class="ds_feature-header__secondary  ds_feature-header__secondary--cover">
        <img class="ds_feature-header__image" alt="" src="/binaries/content/gallery/designsystem/examples/highland-cow-jpg" />
    </div>
</header>

Change the aspect ratio

Use the aspect box component to set an aspect ratio for the image while allowing it to scale with the width of the feature header.

Sample HTML for Feature header example with image set to square aspect ratio

<header class="ds_feature-header  ds_feature-header--background-tertiary">
    <div class="ds_feature-header__primary">
        <h1 class="ds_feature-header__title">Scottish agriculture</h1>
        <p>Ensuring a thriving agriculture sector for Scotland's farmers, crofters and growers.</p>
    </div>
    <div class="ds_feature-header__secondary">
        <div class="ds_aspect-box  ds_aspect-box--square">
            <img class="ds_aspect-box__inner" alt="" src="/binaries/content/gallery/designsystem/examples/highland-cow-jpg" />
        </div>
    </div>
</header>

Top alignment

Make the text and the image align to the top by adding the modifier class ds_feature-header--top.

Sample HTML for Feature header example top aligned

<header class="ds_feature-header  ds_feature-header--top">
    <div class="ds_feature-header__primary">
        <h1 class="ds_feature-header__title">Design standards</h1>
    </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>

Live examples

Benefits and grants on mygov.scot (mygov.scot)

First Minister’s profile on gov.scot (gov.scot)

Back to top