Feature header
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 colourds_feature-header—background-tertiary
uses the tertiary background colourds_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)