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

Last updated
2 April 2025 - see all updates
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

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.

Open this example in a new window

Sample HTML 

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

Open this example in a new window

Sample HTML 

<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

Open this example in a new window

Sample HTML 

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

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>

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

Open this example in a new window

Sample HTML 

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

Open this example in a new window

Sample HTML 

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

Open this example in a new window

Sample HTML 

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

First published
19 August 2022
Last updated
2 April 2025 - show all updates

  1. Document changes in v3.0.0 of the design system

Back to top